Vue Composition API 理解（一）

Composition API——用户层面

Vue 框架
使用hook ->组合起来->Vue3.0 Composition API框架设计模式
e.g. watch - { watch,onMounted,computed } from 'vue‘;

{}里面的是hooks钩子,在 set up（） 中使用

基本按照文档顺序，会记录一些不熟或新功能点

Composition API: setup() | Vue.js (vuejs.org)

setup()

1. .value is no need

 

 

2 return  ender function() ;不使用<template>

 

 

3. set up(props) 

• 响应式

 

 

 

 

 

 

setup(props){
        watchEffect(()=>{
            console.log(props.title);
        })
        //改变前后执行2次

        watch(()=> props.title,(newValue)=>{
             console.log(newValue);
        })
        //改变后执行1次

    }

• 不要解构，否则失去响应式 

 4.

setup(props, ctx ) 

ctx 打印出

 

 

plus

 

 

 

 

 

 

 reactive

1.无this

2.

const proxy0bj = reactive({
      a: 1,
      b: 2
      });
console.log(proxy0bj);

 

 

 

 

 

 

 使用响应式对象，不使用原对象

2.

console.log( count);
const obj = ref({
   a:1,
   b:2
});
console.log(obj);

 

 

 3.

const count = ref(0);
const state = reactive({
  count
})
state.count=1;
console.log(state.count)//1

4.存放Array 或者集合对象，不会展开访问 value

 

 

Refs

1.

export default {
    name:'Ref',
    setup(){
        const name = ref('');
        name.value='张三';
        setTimeout(()=>{
            name.value='李四'
        },2000);
    return{
        name
    }
    }

}

 

 

 

2.deeply reactive

3.unref 语法糖

Returns the inner value if the argument is a ref, otherwise return the argument itself. This is a sugar function for 

val = isRef(val) ? val.value : val.

 

 4.toref

The created ref is synced with its source property: mutating the source property will update the ref, and vice-versa.

 5.computed()

    setup(peops,ctx){
        const sentence = ref( ',你好');
        const superSentence = computed(()=>'小明' + sentence.value)

         console.log( superSentence.value);//小明,你好


    }