【6月日新计划更文活动】第15天

Vue3常用的 Composition API

1、setup

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

2. setup 是所有 Composition API (组合API) ”表演的舞台“

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

4. setup 函数的两种返回值：

   • 若返回一个对像，则对象中的属性、方法，在模板中均可以直接使用
   • 若返回一个渲染函数：则可以自定义渲染内容
   • ! setup中定义的数据一定要返回，不然页面无法获取到数据 !

5. 注意点：

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

      • Vue2.x配置 (data、methods、computed……) 中可以访问到setup中属性、方法
      • 但在setup中不能访问Vue2.x配置 （data、methods、computed……）
      • 如果有重名，setup优先

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