Vue3的setup()小汇总

• 是Vue3中一个新的配置项，也是Vue3跟2最大的区别。又叫组合式API

• 组件中所用到的数据方法等，都要配置在setup中

setup() 的返回值，有两个

1. 返回一个对象时，则对象中的属性，方法，都可以在模板中直接进行使用

​

1. 可以返回一个渲染函数，则可以直接自定义渲染的内容(了解)

​

setup() 有两个参数

1. props

• 一般用作接收组件外传递给组件内的数据

父组件

​

​
子组件

​

2. context

• 上下文对象，包含了一些组件的琐碎的东西

• 其中最重要的有三个，分别是attrs,emit,slots

  • attrs的值为对象，包含组件外部传递过来的，但是没有在props配置中声明的属性。也就是说没有被props接收的，都会被它接收，但是它没有办法对接收的数据做验证哦。相当于this.$attrs

  • slots指收到的插槽的内容，相当于this.$slots

  • emit也就是分发事件的函数，一般用作子传父，相当于this.$emit

emit举例：

子组件

​

​
父组件

​

注意点：

• Vue3中也可以用Vue2的形式，但是不推荐，尽量不要混用

• Vue2配置中是可以访问到setup()中的方法和属性，但是setup()中不能访问Vue2的配置

• 如果有重名冲突，以setup()的为准

• setup()不能是一个async函数，因为返回值不再是return的对象，而是一个promise，模板就用不了对象中的属性

• setup() 要先于 beforeCreate 执行，所以setup() 中是不能用this的

​

• setup()中相当于集成了 beforeCreate 和 created 两个生命周期