总原则

• 减少界面渲染的节点/组件数量，如果不能减少节点/组件数量，则考虑是否能够分批次渲染
• 减少更新节点/组件的数量
• 减少响应式变量的重复访问

零、不要过早优化

注意：一定要先实现目标业务或功能，后续再考虑优化问题，过早的考虑性能优化，很可能使你陷入进退两难的地步。优先实现业务功能才是第一要务。

一. 使用函数式组件

适用情况

纯显示组件

原理

函数组件相对于普通组件，内部没有响应式变量，没有生命周期钩子，因此初始化过程/更新过程相对于普通组件要简单/快很多

官网说明

函数式组件详细说明

实例与分析

二. 组件拆分

适用情况

大组件/大表单

原理

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 初始化过程