vue3setup细节问题

• setup执行的时机

  • 在beforeCreate（数据初始化的生命周期函数回调）之前执行(一次),而且就执行一次， 此时组件对象还没有创建，即组件实例化对象this根本不能用
  • this是undefined, 不能通过this来访问data/computed/methods / props
  • 其实所有的composition API相关回调函数中也都不可以

• setup的返回值

  • 一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
  • 返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
  • 返回对象中的方法会与methods中的方法合并成功组件对象的方法
  • 如果有重名, setup优先
  • 注意:
  • 一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods（因为setup执行是在beforeCreate函数之前，this无法使用）
  • setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据

• setup的参数

  • setup(props, context) / setup(props, {attrs, slots, emit})
  • props是一个对象，里面有父级组件向子级组件传递的数据
  • props: 包含props配置声明且传入了的所有属性的对象
  • context参数是一个对象，里面有attrs对象（获取当前组件标签上的所有的属性的对象，但是该属性是在props中没有声明接收的所有的属性的对象）、emit方法（负责分发事件的）、slots对象（插槽）。
  • attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
  • slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
  • emit: 用来分发自定义事件的函数, 相当于 this.$emit