由 dawei setup 是 Vue3.x 新增的一个选项， 他是组件内使用 Composition API的入口。
setup 执行时机
我在学习过程中看到很多文章都说 setup 是在 beforeCreate和created之间， 这个结论是错误的。实践是检验真理的唯一标准， 于是自己去检验了一下：
export default defineComponent({
beforeCreate() {
console.log("—-beforeCreate—-");
},
created() {
console.log("—-created—-");
},
setup() {
console.log("—-setup—-");
},
});
setup 执行时机是在 beforeCreate 之前执行，详细的可以看后面生命周期讲解。
setup 参数
使用setup时，它接受两个参数：
props: 组件传入的属性
context
setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。由于是响应式的， 所以不可以使用 ES6 解构，解构会消除它的响应式。错误代码示例， 这段代码会让 props 不再支持响应式：
// demo.vue
export default defineComponent ({
setup(props, context) {
const { name } = props
console.log(name)
},
})
那在开发中我们想要使用解构，还能保持props的响应式，有没有办法解决呢？大家可以思考一下，在后面toRefs学习的地方为大家解答。接下来我们来说一下setup接受的第二个参数context，我们前面说了setup中不能访问 Vue2 中最常用的this对象，所以context中就提供了this中最常用的三个属性：attrs、slot 和emit，分别对应 Vue2.x 中的 $attr属性、slot插槽 和$emit发射事件。并且这几个属性都是自动同步最新的值，所以我们每次使用拿到的都是最新值。
reactive、ref 与 toRefs
在 vue2.x 中， 定义数据都是在data中， 但是 Vue3.x 可以使用reactive和ref来进行数据定义。那么ref和reactive他们有什么区别呢？分别什么时候使用呢？说到这里，我又不得不提一下，看到很多网上不少文章说 (reactive用于处理对象的双向绑定，ref则处理 js 基础类型的双向绑定)。我其实不太赞同这样的说法，这样很容易初学者认为ref就能处理 js 基本类型， 比如ref也是可以定义对象的双向绑定的啊， 上段代码：
setup() {
const obj = ref({count:1, name:"张三"})
setTimeout(() =>{
objobj.value.count = obj.value.count + 1
obj.value.name = "李四"
}, 1000)
return{
obj
}