最近使用 Vue 开发的过程中使用到一些对于性能有所提升的编码方式,所以特别梳理出来,可以作为后续 Vue 开发的编码规范使用
性能优化方案主要分为三类,下面就详细讲讲这三类优化方案的应用
- 减少响应式使用
- 减少 DOM 渲染
- 减少打包体积
减少响应式使用
Vue 中使用最方便的就是响应式的变量,在读取(get)对象属性的时候收集副作用函数(effect)依赖,在写入(set)属性时取出副作用函数依赖执行,但是收集依赖、触发依赖执行毕竟都会影响到性能,所以在明确知道不需要使用响应式变量的场景下,就应该减少响应式变量的使用
1. 使用 computed 缓存计算结果
computed 和普通方法的区别在于:computed 会缓存计算结果,只有当计算的内容改变的时候才会重新计算,而普通方法每次都会重新计算。所以对于有计算逻辑的取值,建议尽量都通过 computed 来封装一层
比如下面这个示例就是简单的将 props 通过 computed 封装一层后共 template 使用
const getTooltipStyle = computed((): CSSProperties => {return {color: props.color,fontSize: props.fontSize,};
});
2. 本地化响应式变量
根据 Vue 响应式变量的原理,每次访问响应式数据时,都会收集依赖,所以在需要频繁使用响应式变量的时候,可以先将响应式变量用一个本地变量存储,转换为一个非响应式的变量
在 Vue3 中可以使用 unref
这个 api 来获取到响应式变量参数本身(Vue2 中直接通过 this
赋值就好)
const tableData = ref([])
const unrefTableData = unref(tableData) // 本地化变量后再做大量操作
unrefTableData.forEach(item => {// 具体操作
})
3. 函数式组件(Vue2)
函数式组件是指:只接受一些 prop 参数,无响应式数据,无实例的组件,主要应用在创建简单的展示组件,比如标题 header、纯展示的表单等等。因为没有响应式数据和实例,所以初始化速度比普通有状态的组件快很多,并且还支持返回多个节点
在 Vue2 中声明函数式组件的方式如下
<!-- template 中的声明方式 -->
<template functional>
</template>
<!-- jsx 中的声明方式 -->
Vue.component("list", {
functional: true,
})
但是在 Vue3 中,有状态的组件性能已经大大提升,和无状态组件(函数式组件)几乎没有差异,并且有状态组件也支持了返回多个节点,所以官方也移除了 functional
定义函数式组件的方式,注意 Vue3 中是不兼容 V