Vue3 中的 setup 函数

目录

1.理解：

2.setup 函数的两种返回值：

3.注意点：

        1.尽量不要与 Vue2.x 配置使用

        2.setup 不能是一个 async 函数

4.setup 函数的注意点：

        1. setup 执行的时机 

        2. setup 的参数

---

1.理解：

        1.setup 是 Vue.3.0 中的一个新的配置项，值为一个函数

        2.setup 是所有 Composition API (组合API) 的“表演舞台”。

        3.组件中的所用到的：方法，数据等等，均要配置在 setup 中

2.setup 函数的两种返回值：

        1.返回一个对象，则对象中的属性，方法，在模板中均可以直接使用。（重点关注）

        2.若返回一个渲染函数：则可以自定义渲染内容。（了解）

3.注意点：

        1.尽量不要与 Vue2.x 配置使用

                1. Vue2.x 配置（data，methods，computed ...）中可以访问到setup 中的属性，方法

                2.但在 setup 中不能访问到 Vue2.x 配置 （data，methods，computed ...）。

                3.如果有重名，setup 优先

        2.setup 不能是一个 async 函数

                1. 因为返回值不再是 return 的对象，而是 promise，模板看不到 return 对象中的属性

                2.一个函数被 async 修饰了 它的返回值就再也不是一个单纯的对象了，而是一个被 Promise 包裹的对象

4.setup 函数的注意点：

        1. setup 执行的时机 

                在 beforeCreate 之前执行一次，this 是 undefined

        2. setup 的参数

                1.props: 值为对象，包含：组件外部传过来的，且组件内部声明接收了的属性

                2.context: 上下文对象，以下都是 context 中的东西

                        1.attrs: 值为对象，包含：组件外部传递过来，但没有在 props 配置中声明的属性，相当于 vue2 中的 this.$attrs

                        2.slots: 收到的插槽内容，相当于 vue2 中的 this.$slots

                        3.emit: 分发自定义事件的函数，相当于 vue2 中的 this.$emit