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