Vue3 - setup函数

Vue3.0中一个新的配置项，值为一个函数

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

setup执行的时机：在beforeCreate之前执行一次，this是undefined

setup有两个参数：props、context

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

           props是响应式的，不能使用 ES6 解构，它会消除 prop 的响应性，如果需要解构 prop，可以在 setup 函数中使用 toRefs函数来完成此操作

        2、context  上下文对象

   context 是一个普通的 JavaScript 对象，可以安全地对 context 使用 ES6 解构

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

          slots: 收到的插槽内容, 相当于 this.$slots。

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

export default {
  props: {
    title: String
  },
  setup(props, { attrs, slots, emit, expose }) {
    console.log(props.title)
  	const { title } = toRefs(props)
    //如果 title 是可选的 prop，则传入的 props 中可能没有 title，在这种情况下，toRefs 将不会为 title 创建一个 ref，需要使用 toRef 替代它
    const title = toRef(props, 'title') 
    ...
    function test(){
		emit('hello',666)
	}
    ...
    return { person, test }
  }
}

注意：

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

• Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。

• 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。

• 如果有重名, setup优先。

        2.setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）