深入实战探究 Vue 2.7 Composition API 的强大之处
深入实战探究 Vue 2.7 Composition API 的强大之处
最近几年公司开发一直使用的是 Vue2.6，对于逻辑复用使用的是 Mixin 方式，但随着项目体量的增加，带了一些问题，特别是：数据混乱问题：实例上的数据属性从当前模板文件中无法查取到，存在多个 Mixin 时该问题会变得变得更难以追踪；同时，多个 Mixin 中也可能出现相同属性名，产生冲突。
最近项目中升级了 Vue2.7，关于升级方法，大家可以参考官方文档：迁移至 Vue 2.7
我们的原则是：已存在的业务模块依然保持 Options Api 方式；新增加的全部切换为 Composition Api。基于这样的原则，整个迁移过程，个人认为还是比较丝滑的。
最近也使用 Composition Api 完成了一些模块的开发工作，特总结一下与原 Options Api 的差异，总结一下 Composition Api 强大之处。
Composition API：Vue 2.7 版本引入了一种全新的特性，它是一种新的组织和复用 Vue 组件逻辑的方式，引入了一些强大的功能，使得组件的逻辑更加清晰、灵活和可复用。
本文将深入探讨 Vue 2.7 Composition API 的一些关键特性和优点。
什么是Composition API
Composition API是 Vue 2.7 中引入的一种新的组件逻辑复用方式。它与 Vue 之前的 Options API 有很大的不同。
- Options API：基于对象的方式，将组件的各种选项，如data、methods、computed等，组织在一个对象中；
export default {
data () {},
computed: {},
methods: {}
}- Composition API：允许我们将组件的逻辑拆分成更小的、可复用的部分，称为composition函数。
export default {
setup() {}
}或者
<script setup></script> Composition API 的优点
在实际开发过程中，使用 Composition API 带来了一些显著的优点，使得组件可以更加灵活、清晰，复用性也得到显著提高。
1. 更灵活的组件逻辑复用
Composition API 允许将组件的逻辑拆分成更小的、可复用的 composition 函数。这使得可以更灵活地组合和复用组件逻辑，而不仅仅是通过组件的选项进行组织。可以将多个 composition 函数组合在一起，形成更复杂的逻辑，从而实现更高度的组件复用。
<script setup>
import { ref } from 'vue'
import { useIdssDialogStartWatchForm, useIdssDialogCloseConfirm } from '@/compositions/closeConfirm.js'
const form = ref({})
watch(() => props.visible, (val) => {
// 监听form值是否发生变化
val && useIdssDialogStartWatchForm(form)
})
function beforeClose (done) {
// 如form值发生变化，关闭前给出提示
useIdssDialogCloseConfirm(done, $idssFormChange)
}
</script>便利： 类似于纯函数，整个封装颗粒度可以更小，且复用场景更大（脱离了 this ）
2. 更强大的响应式能力
Composition API 引入了ref和reactive等新的响应式API，能够更方便地管理组件的状态。
ref：用于创建一个可以在模板中使用的响应式变量reactive：可以将一个普通的JavaScript对象转换为响应式对象
<template>
<div>{{count}}</div>
</template>
<script setup>
const count = ref(0)
function add () {
count.value++
}
</script> 便利： 可以更加直观地管理组件的状态，并且不再需要像以前那样使用 data 选项来声明变量
3. 更清晰的组件逻辑
通过使用 Composition API，可以将组件的不同逻辑拆分成独立的 composition 函数，从而让组件的逻辑更加清晰和易于理解。每个 composition 函数都可以专注于解决一个特定的问题，使得组件的逻辑更加模块化和可维护。
// closeConfirm.js
export function useIdssDialogStartWatchForm(variableName) {}
export function useIdssDialogCloseConfirm(done = function () {}, $idssFormChange) {}便利： 可以类似工具函数的方式分类管理，需要时直接引入即可
4. 更好的类型检查和编辑器支持
由于Composition API 是基于函数的方式来组织组件逻辑，这意味着可以在编写代码时获得更好的类型检查和编辑器支持。编辑器可以更好地识别 composition 函数的参数和返回值，并提供相关的代码提示和自动补全，这可以提高开发效率，减少错误。
便利： 我们项目中并没有启用 typescript，但通过编辑器相应的功能支持，已经可以体现因为函数方式带来的便利。
5. 更好的性能
Composition API 在一些性能指标上优于Options API。由于 Composition API 使用了更加高效的响应式系统，它可以更好地处理大规模的组件状态更新。
同时，为了最大化提升性能，还提供了浅层（不会被深层递归地转为响应式）作用的相关方式 shallowRef() 及 shallowReactive() 等。
const state = shallowReactive({
foo: 1,
nested: {
bar: 2
}
})
// 更改状态自身的属性是响应式的
state.foo++
// ...但下层嵌套对象不会被转为响应式
isReactive(state.nested) // false
// 不是响应式的
state.nested.bar++便利： 针对不同场景，更有针对性使用不同的方法，提升了页面渲染速度。