文章目录
总原则
- 减少界面渲染的节点/组件数量,如果不能减少节点/组件数量,则考虑是否能够分批次渲染
- 减少更新节点/组件的数量
- 减少响应式变量的重复访问
零、不要过早优化
注意:一定要先实现目标业务或功能,后续再考虑优化问题,过早的考虑性能优化,很可能使你陷入进退两难的地步。优先实现业务功能才是第一要务。
一. 使用函数式组件
适用情况
纯显示组件
原理
函数组件相对于普通组件,内部没有响应式变量,没有生命周期钩子,因此初始化过程/更新过程相对于普通组件要简单/快很多
官网说明
实例与分析
二. 组件拆分
适用情况
大组件/大表单
原理
Vue的更新粒度为组件,将一个大组件或大表单拆分为多个小组件,数据更新时,只会涉及到对应的小组件,能够有效较少需要diff的vnode数量
实例与分析
三. 尽量适用普通变量而非响应式变量
适用情况
for循环
原理
vue默认会将data中定义的变量变为响应式变量,而获取和设置响应式变量的变量值时,会触发很多额外的操作(如:依赖收集和唤醒观察者),这些操作是需要耗费一定性能的,如果能避免,应该尽量避免
实例与分析
四. 适当考虑v-show替代v-if
适用情况
组件需要做显示/隐藏控制的时候
原理
v-if从显示到隐藏,是会将组件/节点完全删除的,从隐藏到显示组件/节点必须完整的经历一次创建过程,而v-show只是组件/节点的显示和隐藏,不必每次都执行组件/节点的完整创建过程
实例与分析
五. 使用KeepAlive
六. 使用Deferred
延迟分批渲染
适用情况
大组件/大表单的渐进式渲染
原理
不是一次性就将整个组件/表单的内容全部渲染出来,而是每次渲染一部分,从而避免JS执行时间过长,导致的界面卡顿现象