Setup

1.理解：vue3.0中一个新的配置项，值为一个函数

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

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

4.setup函数的两种返回值

​ 1.若要返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。

​ 2.若返回一个渲染函数，则可以自定义渲染内容

5.注意点：

1.尽量不要与vue2.x配置混用

• vue2.x配置（data、methods、computed…）中可以访问到setup中的属性、方法。
• 但在setup中不能访问到vue2.x配置（data、methods、computed…）
• 如果有重名，setup优先

2.setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。

1 setup

vue3.0将组件的逻辑都写在了函数内部，setup()会取代options API的data()函数，返回一个对象暴露给模板。

setup 选项在组件创建之前执行(所以在setup内部无法通过this来访问组件对象)，一旦 props 被解析，就将作为组合式 API 的入口。

setup 函数是个新的入口函数，相当于 vue2.x 中 beforeCreate 和 created，在 beforeCreate 之后 created 之前执行。

setup函数的特性：

• 使用Composition API 的入口

• 在beforeCreate之后在created之前执行

• 在setup中没有this,或者说this是undefined

• 可以返回一个对象，这个对象的属性被合并到渲染上下文，并可以在模板中直接使用；

• 接收props对象作为第一个参数，接收来的props对象，包含组件外部传递过来，且组件内部声明接收了的属性，可以通过watch监视其变化。

• 接受context对象作为第二个参数，这个对象包含attrs，slots，emit三个属性。

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

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

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