Vue3 --- setup

setup

• 理解：Vue3.0中的一个新的配置项，值为一个函数。
• setup是所有Composition API（组合API）“表演的舞台”。
• 组件中所用到的：数据、方法等等，均要配置在 setup 中。
• setup函数的两种返回值：
  • 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。
  • 若返回一个渲染函数：则可以自定义渲染内容。
• 注意：
  • 尽量不要与vue2.x配置混用
    • vue2.x配置（data、methods、computed...）中可以访问到setup中的属性、方法。
    • 但在setup中不能访问到Vue2.x的配置（data、methods、computed...）。
    • 如果有重名，setup优先。
  • setup 不能是一个async 函数，因为返回值不再是return 的对象，而是promise ，模板看不到return 对象中的属性。(在Suspense 和 动态引入异步组件的配合下，也可以返回一个promise实例)

setup 执行的时机

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

setup 参数

• props：值为对象，包含：组件外部传过来，且组件内部声明接收了的属性。（要记得在prop:[] 里面接收）
• context：上下文对象
  • attrs：值为对象，包含组件外部传递过来，但没有在props配置中声明的属性，相当于this.attrs。
  • slots：收到的插槽内容，相当于this.$slots。
  • emit：分发自定义事件的函数，相当于 this.$emit。（会有警告，记得在emits 里面声明：emits[] ）

v-slot