1️⃣ 使用 key

对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素

1️⃣ 使用冻结对象

对于 data 里的数据对象，如果对象不需要被修改（ 包括：增删改 ），且对象数据比较大，则可以使用冻结对象，因为冻结对象 vue 不会将其遍历为响应式数据，由此来优化性能。

  1. Object.freeze() // 将一个对象设置为冻结对象
  2. Object.isFrozen() // 方法判断一个对象是否被冻结

1️⃣ 使用函数式组件

当一个组件不需要状态（即响应式数据 data）、不需要任何生命周期场景、只接受一些 props 来显示组件时，我们可以将其标记为函数式组件。函数组件因为只是一个函数，所有开销比较低。

1️⃣ 使用计算属性

如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们

1️⃣ 使用非实时绑定的表单项

当使用v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染（rerender），这会带来一些性能的开销。
特别是当用户改变表单项时，页面有一些动画正在进行中，由于JS执行线程和浏览器渲染线程是互斥的，最终会导致动画出现卡顿。
我们可以通过使用lazy或不使用v-model的方式解决该问题，但要注意，这样可能会导致在某一个时间段内数据和表单项的值是不一致的。

1️⃣ 保持对象引用稳定

在绝大部分情况下，vue触发rerender的时机是其依赖的数据发生变化
若数据没有发生变化，哪怕给数据重新赋值了，vue也是不会做出任何处理的
下面是vue判断数据没有变化的源码

  1. // value 为旧值， newVal 为新值
  2. if (newVal === value || (newVal !== newVal && value !== value)) {
  3.   return
  4. }

因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染。
对于原始数据类型，保持其值不变即可
对于对象类型，保持其引用不变即可
从另一方面来说，由于可以通过保持属性引用稳定来避免子组件的重渲染，那么我们应该细分组件来尽量避免多余的渲染
比如说：有 100 评论数据，用户新加了一条为 101，在添加后要实时更新评论数据的展示，可以从服务器获取最新的数据覆盖原来的 100 条数据，这会导致所有的数据都会重新加载刷新，如果使用对象引用稳定，通过对比最新的数据和之前的数据有什么不同，将新增加的一条数据添加在 100 的数组里，就不会导致所有的数据重新刷新。

1️⃣ 使用 v-show 替代 v-if

对于频繁切换显示状态的元素，使用 v-show 可以保证虚拟 dom 树的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量 dom 元素的节点，这一点极其重要
关键字：频繁切换显示状态、内部包含大量 dom 元素

1️⃣ 使用延迟装载（defer）

首页白屏时间主要受到两个因素的影响：

  1.   1. 打包体积过大巨型包需要消耗大量的传输时间，导致 JS 传输完成前页面只有一个`<div>`，没有可显示的内容
  2.   2. 需要立即渲染的内容太多 JS 传输完成后，浏览器开始执行 JS 构造页面。但可能一开始要渲染的组件太多，不仅 JS 执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏

打包体积过大需要自行优化打包体积，本节不予讨论
本节仅讨论渲染内容太多的问题。
一个可行的办法就是延迟装载组件，让组件按照指定的先后顺序依次一个一个渲染出来

延迟装载是一个思路，本质上就是利用requestAnimationFrame事件分批渲染内容，它的具体实现多种多样

1️⃣ keep-alive

使用方法参考：动态组件 & 异步组件

1️⃣ 长列表优化

npm install —save vue-virtual-scroller
https://github.com/Akryum/vue-virtual-scroller