setup()

• 1、setup() 函数是 vue3 中，专门为组件提供的新属性（配置项）。
• 2、它为我们使用 vue3 的 Composition API(组合式API) 新特性提供了统一的入口。
• 3、组件中用到的数据、方法等都需要配置在setup中
• 4、setup函数的两种返回值
  • 4.1、若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
  • 4.2、若返回一个渲染函数：则可以自定义渲染内容。（了解）

import {h} from 'vue'
return ()=> h('h1','Hello World!')  // 将会把模板中的内容完全替换

• 5、注意点
  • 5.1、尽量不要与vue2中的选项配置混用。Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法通过this.[属性/函数名]方式。但在setup中不能访问到Vue2配置（data、methos、computed...）。
  • 5.2、如果有重名, setup优先级更高。
  • 5.3、setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。

setup执行时机

setup 函数会在 beforeCreate 之后、created 之前执行

setup参数

• 1、props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。在 props 中定义当前组件允许外界传递过来的参数名称

props: {
  title: String
}
// -----------
setup(props) {
    console.log(props.title)
}

• 2、context：上下文对象
  • 2.1、attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于Vue2 this.$attrs。
  • 2.2、slots: 收到的插槽内容, 相当于Vue2 this.$slots。
  • 2.3、emit: 分发自定义事件的函数, 相当于Vue2 this.$emit。
  • ...........

setup 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }
}