Vue3.0 setup函数

setup的概念

setup是Vue3中的一个新的配置项，值为一个函数；
我们在组件中用到的数据、方法等等，都要配置在setup中。

---

setup如何去使用

1. 语法糖格式：写在script开始标签中，内部的属性和方法，无需return暴露；

2. setup(){ } ：内部的属性和方法，必须用return暴露出来，要将属性挂载到实例上，否则没有办法使用。

---

setup中包含的生命周期函数

onBeforeMount——挂载开始前调用
onMounted——挂载后调用
onBeforeUpdate——当响应数据改变，且重新渲染前调用
onUpdated——重新渲染后调用
onBeforeUnmount——Vue实例销毁前调用
onUnmounted——实例销毁后调用
onActivated——当keep-alive组件被激活时调用
onDeactivated——当keep-alive组件取消激活时调用
onErrorCaptured——从子组件中捕获错误时调用

---

使用setup时需要注意哪些事项

注意事项：

1. setup用来写组合式api，从生命周期的角度，相当于取代了beforeCreate()，setup函数执行时机是在beforeCreated和created两个周期函数之前，无法和选项式api混用。
2. 内部使用时，没有this。因为实例还未创建，所以没有办法调用组件实例this；
3. 使用setup时，它将接受两个参数 ： props和context

props
1. 表示父组件给子组件传的数据；
2. props是响应式的，当数据发送改变时，自动更新；
3. 3. 因为props是响应式的，不能使用es6的解构，会消除响应式特性(使用toRefs)。

context
context 上下文环境。其中包括了 属性(attrs)，插槽(slots)，自定义事件(emit)三部分。
attrs：是一个非响应式对象，只要接受no-props属性。经常用来传递一些样式/标签特有属性。
slots：是一个Proxy对象，其中slots.default()获取到一个数组。数组长度表示插槽的数量，
数组中的元素时插槽的内容。
emit：因为setup没有this，所以使用emit开替换之前的this.$emit。用于子传父时，自定义事件的触发
示例：emit(“自定义事件名”，传递的值)。

4. setup内部的属性都不是响应式的；
5. setup不能调用生命周期相关函数，但生命周期相关函数可以调用setup相关的属性和方法，可以使用this或者嵌套存在。

---