超详细！图文讲解Vue3的组合式API！

藏色散人

发布时间：2022-08-09 09:29:12

4607人浏览过

来源于csdn

转载

组合式API

组合式api（Composition API）算是vue3对我们开发者来说非常有价值的一个api更新，我们先不关注具体语法，先对它有一个大的感知

1. composition vs options

options API开发出来的vue应用如左图所示，它的特点是理解容易，因为各个选项都有固定的书写位置，比如响应式数据就写到data选择中，操作方法就写到methods配置项中等，应用大了之后，相信大家都遇到过来回上下找代码的困境
composition API开发的vue应用如右图所示，它的特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便，设置如果功能复杂，代码量大，我们还可以进行逻辑拆分处理【推荐：vue视频教程】

特别注意：
选项式api和组合式api俩种风格是并存的关系并不是非此即彼
需要大量的逻辑组合的场景，可以使用compition API进行增强

2. 案例对比

上面我们通过图示简单了解了一下vue3带来的全新的api形式，下面我们通过一个具体的小案例更加深入的体会一下俩种api下的开发模式对比，我们先暂时忽略语法细节，只关注代码编写形式

2.1 理解需求

在这里插入图片描述
俩个独立的功能：

通过点击按钮来控制p的显示和隐藏

立即学习“前端免费学习笔记（深入）”；
通过点击按钮控制p内字体颜色的变化

2.2 vue2.x option Api版本

2.3 vue3.0 composition api版本

2.4 composition api版本优化

在这里可能会有疑惑，那我们现在是把功能相关的所有数据和行为放到一起维护了，如果应用很大功能很多的情况下，setup函数不会变得很大吗？岂不是又会变得比较难维护，接下来我们就来拆解一下庞大的setup函数

以上，我们通过定义功能函数，把俩个功能相关的代码各自抽离到一个独立的小函数中，然后通过在setUp函数中再把俩个小功能函数组合起来，这样一来，我们既可以把setup函数变得清爽，又可以方便维护快速定位功能位置

到此我们没有关注api细节，只是体会组合式api给到我们的好处，接下来我们就要深入到api细节，看看全新的api都该如何使用 ↓

3. setup入口函数

setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
setup 中不能使用 this， this 指向 undefined
setup函数只会在组件初始化的时候执行一次
setup函数在beforeCreate生命周期钩子执行之前执行

export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }}

4. 响应式系统API

4.1 reactive 函数

作用：reactive是一个函数，接收一个普通的对象传入，把对象数据转化为响应式对象并返回

使用步骤

从vue框架中导入reactive函数
在setup函数中调用reactive函数并将对象数据传入
在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去

代码落地

4.2 ref 函数

作用：ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象

使用步骤

从vue框架中导出ref函数
在setup函数中调用ref函数并传入数据（简单类型或者复杂类型）
在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
注意：在setup函数中使用ref结果，需要通过.value 访问，模板中使用不需要加.value

总结说明：

ref 函数可以接收一个简单类型的值，返回一个可改变的 ref 响应式对象，从而弥补reactive函数不支持简单类型的问题
reactive和ref函数都可以提供响应式数据的转换，具体什么时候需要使用哪个API社区还没有最佳实践，大家暂时可以使用自己熟练的API进行转换
推荐一种写法：只有我们明确知道要转换的对象内部的字段名称我们才使用reactive，否则就一律使用ref，从而降低在语法选择上的心智负担

4.3 toRefs 函数

场景: 经过reactive函数处理之后返回的对象，如果给这个对象解构或者展开，会让数据丢失响应式的能力，为了解决这个问题需要引入toRefs函数，使用 toRefs函数可以保证该对象展开的每个属性都是响应式的

4.3.1 问题复现

还是之前的案例，如果我们想在模板中省略到state，直接书写name和age，你可能会想到，那我在return出去的时候把state中的属性解构出来不就好了

修改前

解构修改后

点击改值按钮，发现视图已经不发生变化了，这就是我们所说的，如果解构reactive的返回值，将破坏调用响应式特性，就需要我们使用toRefs方法进行处理了

4.3.2 toRefs包裹处理

4.4 computed

在setup函数中使用计算属性函数

作用：根据现有响应式数据经过一定的计算得到全新的数据

使用步骤

从vue框架中导入computed 函数
在setup函数中执行computed函数，并传入一个函数，在函数中定义计算公式
把computed函数调用完的执行结果放到setup的return值对象中

4.5 watch 侦听器

在setup函数中侦听器的使用

作用：基于响应式数据的变化执行回调逻辑，和vue2中的watch的功能完全一致

普通监听

立即执行

深度监听

使用步骤

从vue框架中导入watch函数
在setup函数中执行watch函数开启对响应式数据的监听
watch函数接收三个常规参数
1. 第一个参数为函数，返回你要监听变化的响应式数据
2. 第二个参数为响应式数据变化之后要执行的回调函数
3. 第三个参数为一个对象，在里面配置是否开启立刻执行或者深度监听

4.5.1 普通监听

4.5.2 开启立刻执行

watch的效果默认状态下，只有监听的数据发生变化才会执行回调，如果你需要在一上来的时候就立刻执行一次，需要配置一下immediate属性

MCP Market
MCP Servers集合平台，帮你找到最好的MCP服务器

下载

4.5.3 开启深度监听

当我们监听的数据是一个对象的时候，默认状态下，对象内部的属性发生变化是不会引起回调函数执行的，如果想让对象下面所有属性都能得到监听，需要开启deep配置

4.5.4 更好的做法

使用watch的时候，尽量详细的表明你到底要监听哪个属性，避免使用deep引起的性能问题，比如我仅仅只是想在state对象的age属性变化的时候执行回调，可以这么写

5. 生命周期函数

使用步骤

先从vue中导入以on打头的生命周期钩子函数
在setup函数中调用生命周期函数并传入回调函数
生命周期钩子函数可以调用多次

选项式API	组合式API
`beforeCreate`	不需要（直接写到setup函数中）
`created`	不需要（直接写到setup函数中）
`beforeMount`	`onBeforeMount`
`mounted`	`onMounted`
`beforeUpdate`	`onBeforeUpdate`
`updated`	`onUpdated`
`beforeDestroyed`	`onBeforeUnmount`
`destroyed`	`onUnmounted`