Vue3中的 setup 是什么？

setup是什么

1. setup是在组件中使用组合式API的入口
2. setup函数是处于 生命周期函数 beforeCreate 和 Created 两个生命周期之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的
3. 在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使

参数

接受两个参数，一个参数是props，可以接收到父组件传递的数据，如果props是一个动态的值，那么他就是响应式的，会随着父组件的改变而更新。但是因为他是响应式的因此不能使用es6解构。
如果需要解构props，需要使用toRefs函数

setup(props, context){
	const { user } = Vue.toRefs(props)
  console.log(user.value)
}

如果props是可选props，则应该使用toRef代替他

setup(props, context){
	const { user } = Vue.toRef(props, 'user')
  console.log(user.value)
}

接收的第二个参数是context对象，这是一个js对象，暴露了三个属性，attrs、slots、emit，因为是普通的js对象因此是可以用es6解构的。
● attrs对象是父组件传递给子组件且不在props 中定义的静态数据，它是非响应式的，相当于在没有使用setup方法时调用的 this.$attrs 效果。

● slots对象主要是父组件传递的插槽内容，注意v-slot:slotone需要配置插槽名字，这样 slots才能接收到，它是非响应式的，相当于在没有使用setup方法时调用的this.$slots 效果。

● emit对象主要用来和父组件通信，相当于在没有使用setup方法时调用的this.$emit效果。
如果setup方法返回一个对象，那么该对象的属性以及传递给setup的props参数中的属性都可以在模板中访问。
props中的数据不必在setup中返回，vue会自动暴露给模板使用。
setup方法在beforeCreate之前执行，由于此时组件还没有实例化，是无法通过this.xx访问当前实例的上下文的
但vue还是在组合式api中提供了getCurrentInstance方法来访问组件实例的上下文对象，只能在setup和生命周期钩子中调用；并不建议在业务逻辑中使用该方法。