Vue 中直接上手的性能优化方案

最近使用 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 中声明函数式组件的方式如下

Vue.component("list", {
	functional: true,
}) 

但是在 Vue3 中，有状态的组件性能已经大大提升，和无状态组件（函数式组件）几乎没有差异，并且有状态组件也支持了返回多个节点，所以官方也移除了 functional 定义函数式组件的方式，注意 Vue3 中是不兼容 Vue2 的函数