Vue3全家桶升级指南一composition API

1、setup()

vue3中的composition API中最重要的就是setup方法了，相当于组件的入口，所有的composition API都必须放到setup()中的使用。

setup是在组件实例初始化之前执行的(beforeCreated之前)，是整个组件的入口函数，这个时候数据和方法还没有进行挂载，因此在setup中this并不会执行当前组件实例，也不能通过this获取组件中的数据和方法了。

在模板中使用到的变量和方法必须在setup中return出来，才能使用。

export default {
    setup(){
        let name="张三"
        return {name}//必须在这里return，模板中才能使用过
    }
}

setup中的参数 上面已经说过，因为setup是在beforeCreate之前执行的，所以setup中的this并不会指向当前组件实例，this的值为undefined，那么我们怎么和父子组件通信呢（之前可以通过this.$emit触发）？这时就需要用到setup的参数了。

setup有两个参数，第一个是props，父组件传递给当前组件的prop都在这个参数对象中，第二个参数是上下文context，里面包含后attrs,emit,slots，这几个参数的用法就和vue2中的大同小异了，这里不做过多赘述。

2、ref用来定义基础类型的响应式数据

在setup中直接定义的变量不是响应式的，如果需要定义基础类型的响应式变量，需要使用ref来定义

import {ref} from "vue"
export default {
    setup(){
        let name = '张三';
        setTimeout(() => {
            name = '李四';
            console.log(name);//这里的改变了，但是视图并不会更新
        }, 2000);
        return { name };
    }
}

import {ref} from "vue"
export default {
    let name = ref('张三');
        setTimeout(() => {
            name.value = '李四';
            console.log(name.value); //李四
        }, 2000);
        return { name };
}   

需要注意的是，通过ref定义的变量，在js中使用的时候需要通过.value来获取或者设置值，但是在模板中使用的时候不需要加.value，vue内部已经帮我们处理了。<