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