永远不要过早优化

why？过早优化的代价就是开发时间变长，开发成本增加，它会慢慢的让我们的代码变得不可阅读，难以维护；这些都是优化带来的代价。有句话是这样说的：命运馈赠的礼物，早已在暗中标好了价格

优化的原则就是：因地制宜，见招拆招

使用key（唯一且稳定）

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

使用冻结的对象

冻结的对象不会被响应化，使用Object.freeze(obj)来对一个对象进行冻结， 那如何来看一个对象是否是冻结对象呢？那就可以通过Object.isFrozen(obj)传入这个对象，它会返回一个布尔值。

它的应用场景是用于展示大批量数据的时候，且这些数据不需要响应式的特性，就可以用冻结对象来提升渲染性能，减少渲染时间，提升用户体验。

使用函数式 组件 （参加函数式组件）

vue不会为函数式组件创建实例，所以能提升性能

使用计算属性

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

非实时绑定的表单项

当使用 v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染（rerender），这会带来一些性能的开销。

我们可以通过使用lazy或不适用v-model的方式解决该问题，但要注意，这样可能会导致在某一时间段内数据和表单项的值是不一致的。 （v-model.lazy）他不会去监听数据的每一次变化，而是监听@change事件，不用lazy的话 监听的是@input事件

保持对象引用稳定

在绝大部分情况下，vue触发rerender的时机是其依赖的数据发生变化

若数据没有发生变化，哪怕给数据重新赋值了，vue也是不会做出任何处理的

function hasChanged(x,y) {if(x === y) {return x === 0 && 1 / x !== 1 / y} else {return x === x || y === y      // NaN === NaN   输出为false}
}

因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染。

对于原始数据类型，保持其值不变即可。

对于对象类型，保持其引用不变即可。

从另一方面来说，由于可以通过保持属性引用稳定来避免子组件的重渲染，那么我们应该细分组件来尽量避免多余的渲染。

使用v-show代替v-if

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

**关键字:**频繁切换显示状态、内部包含大量dom元素

使用延迟装载

JS传输完成后，浏览器开始执行JS构造页面。

但可能一开始要渲染的组件太多，不仅JS执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏

一个可行的办法就是延迟装载组件，让组件按照指定的先后顺序依次一个一个渲染出来

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

你