我对Vue 3.x Composition API 的理解

目录

一、Vue3.x 的 Composition API 带来了哪些新功能？

1. reactive

2. ref、toRef、toRefs

3. watch 和 watchEffect

4. setup

5. 生命周期函数

二、对比 Vue2.x，Vue3.x 有哪些优势？

三、如何正确看待 Composition API ？

四、Composition API 与 Options API 如何选择？

五、Composition API 如何实现代码逻辑复用？

---

一、Vue3.x 的 Composition API 带来了哪些新功能？

1. reactive

生成对象的响应式。

2. ref、toRef、toRefs

ref：声明值类型的响应式数据，除了模板和 reactive 中直接使用定义的 ref 变量外（因为这两种情况都会经过 Vue 编译，所以 Vue 可以帮助加上），其他地方都需要使用 ref.value 来获取变量的值；

toRef：将 reactive 封装的响应式对象中的某一个 prop 创建为一个响应式的 ref，该 ref 与响应式对象中的 prop 相对应，两者保持引用关系，即其中一方修改，另一方也会被修改为最新值；

toRefs：将 reactive 封装的响应式对象整个创建为普通对象，对象的每个属性 prop 对应的都是一个 ref，且与 reactive 对象中的属性保持一一对应关系。

3. watch 和 watchEffect

watch：需要明确声明监听哪个属性；只有当声明监听的属性发生变化时才会实现监听；

watchEffect：会根据其函数体中的属性，自动监听这些属性的变化；初始化时会实现一次监听。

4. setup

setup函数是 Composition API 的入口；

在setup函数中定义的变量和方法最后都需要 return 出去，不然无法在模板中进行使用；

相当于options API 中的beforeCreated 和 created这两个生命周期函数，不同的是在 setup 函数中无法直接获取到 data，可在 onMounted 这个钩子函数中获取。

5. 生命周期函数

onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmounted、onUnmounted。

二、对比 Vue2.x，Vue3.x 有哪些优势？

个人理解是：

1. Vue2.x 中代码的组织性较低，比如数据在 data 中声明，调用时却可能各个生命周期中都会有，当项目复杂度不是很高时，这样的方式可能影响不是很大，但当项目的体量上来时，这样阅读起来就不是很方便了；Vue3.x 能够很好地将代码的组织性提高，某一个功能块的代码就放在一起，这样井然有序，利于阅读；

2. Vue2.x 中的 mixin 混入的方式，来对重复的变量和方法进行抽离，这样做是很方便的，但是也有缺点：混入是多对多的关系，这样提高了复杂度，而且在混入的过程中，不能确保变量的唯一性，会导致不知道的变量重复，需要消耗时间去查找重复的变量和位置；Vue3.x 使用抽离重复的代码逻辑到一个函数中，用这样的方式既能使变量在作用域中被独立起来，提高了代码的复用性，也比较符合 JS 的编程语言特点。

三、如何正确看待 Composition API ？

Composition API 属于高阶技巧，是为解决复杂业务逻辑而设计的，不是基础必会的内容，但是需要有一定的了解和掌握。

四、Composition API 与 Options API 如何选择？

首先在一个项目中，不建议这两种方式混用，因为两种的使用方式不一样，容易引起混乱，使项目看起来非常不统一；小体量，业务逻辑较简单的项目可以使用 Options API，这样更便于维护；中大体量的项目，业务逻辑偏复杂，需要更好的代码组织和逻辑复用时，可以使用 Composition API。

五、Composition API 如何实现代码逻辑复用？

1. 抽离逻辑代码到一个函数；

2. 函数命名约定为useXXX；

3. 在setup中引用useXXX函数，并返回需要的变量或函数。