组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。组合式 API 是Vue 3 及 Vue 2.7 的内置功能。对于更老的 Vue 2 版本,可以使用官方维护的插件 @vue/composition-api。
Vue3并没有强制必须要使用组合式 API (Composition API) 在Vue3中还是可以使用 选项式(Options API)的写法。
什么是组合式 API?
组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语,涵盖了以下方面的 API:
响应式 API:例如 ref() 和 reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。
生命周期钩子:例如 onMounted() 和 onUnmounted(),使我们可以在组件各个生命周期阶段添加逻辑。
依赖注入:例如 provide() 和 inject(),使我们可以在使用响应式 API 时,利用 Vue 的依赖注入系统。
组合式 API优点
- 提高代码逻辑的可复用性
- 更灵活的代码组织
对比
选项式 API(Options API)
1 | <script> |
组合式 API (Composition API)
1 | <script setup> |
通过上面的例子相同的业务逻辑,组合式 API 里面同一个逻辑关注点相关的代码被归为了一组:我们无需再为了一个逻辑关注点在不同的选项块间来回滚动切换。此外,我们现在可以很轻松地将这一组代码移动到一个外部文件中,不再需要为了抽象而重新组织代码,大大降低了重构成本,这在长期维护的大型项目中非常关键。
<script setup>
在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是,我们可以通过使用构建工具来简化该操作。当使用单文件组件(SFC)时,我们可以使用 <script setup> 来大幅度地简化代码。
setup() 函数
1 | import { reactive } from 'vue' |
<script setup>
1 | <script setup> |
响应式 API
ref()
接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value。如果在 <template> 可以不用写.value
1 | const count = ref(0) |
给ref传一个对象内部会去调用reactive()
reactive()
返回一个对象的响应式代理。
1 | const state = reactive({ |
toRef()
基于响应式对象上的一个属性,创建一个对应的 ref。这样创建的 ref 与其源属性保持同步:改变源属性的值也会同步关联修改。
1 | const state = reactive({ |
toRefs()
将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
1 | const state = reactive({ |
computed()
接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。
1 | const state = reactive({ |
watch(source,callback,options)
侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。
- 第一个参数是侦听器的源。
- 第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数:新值、旧值,以及一个用于注册副作用清理的回调函数。当侦听多个来源时,回调函数接受两个数组,分别对应来源数组中的新值和旧值。
- 第三个可选的参数是一个对象,支持以下这些选项:
- immediate:在侦听器创建时立即触发回调。 默认:false
- deep:如果源是对象,强制深度遍历,以便在深层级变更时触发回调。 当直接侦听一个响应式对象时,侦听器会自动启用深层模式。 默认:false
- onTrack / onTrigger:调试侦听器的依赖。
- flush:调整回调函数的刷新时机。 ‘pre’ | ‘post’ | ‘sync’ 默认:’pre’
- 默认情况下,用户创建的侦听器回调,都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。
- 如果想在侦听器回调中能访问被 Vue 更新之后的 DOM,你需要指明 flush: ‘post’
- sync 同步调用
1 | const count = ref(0); |
多个值
1 | const count1 = ref(0); |
当直接侦听一个响应式对象时,侦听器会自动启用深层模式:
1 | const state = reactive({ count: 0 }) |
停止侦听器:
1 | const stop = watch(source, callback) |
watchEffect(effect, options)
立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。
- 第一个参数就是要运行的副作用函数。会自动收集函数里面的依赖监听。
- 第二个参数是一个可选的选项,可以用来调整副作用的刷新时机或调试副作用的依赖。
- onTrack / onTrigger:调试侦听器的依赖。
- flush:调整回调函数的刷新时机。 ‘pre’ | ‘post’ | ‘sync’ 默认:’pre’
1 | const count = ref(0) |
和watch()用法一样,区别watchEffect可以自动收集需要监听的依赖。
常用的响应式API就这些,更多API可以去官网查看
生命周期钩子
⽣命周期钩⼦写法微调,xxx变成 OnXxx,如mouted 变成 onMounted。created和beforeCreate不再需要。Vue2中 destroyed 和 beforeDestroy 在Vue3换了名字,换成 beforeUnmount 和 unmounted 。
选项式 API | 组合式 API |
---|---|
beforeCreate | setup() |
created | setup() |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeUnmount | onBeforeUnmount |
unmounted | onUnmounted |
errorCaptured | onErrorCaptured |
renderTracked | onRenderTracked |
renderTriggered | onRenderTriggered |
activated | onActivated |
deactivated | onDeactivated |
serverPrefetch | onServerPrefetch |