Vue常见优化手段
使用Key
对于通过循环生成的列表，应给每个列表一个稳定且唯一的key，这有利于在列表变动，尽量少的删除、新增、改动元素
使用冻结的对象
冻结的对象不会被响应化
使用函数式组件
做渲染的函数组件 无状态 响应更快
使用计算属性
如果模板中某个数据会使用多次，并且该数据是通过计算得到的 使用计算属性以缓存他们
非实时绑定的表单项
当使用 v-model 绑定一个表单项的时 当用户改变表单状态时 也会随之改变数据 从而导致Vue发生重新渲染{rerender} 会带来性能开销 可以使用lazy或者不使用v-model
保持对象引用稳定
大部分情况下，Vue触发rerender的时机是其依赖的数据发生变化
若数据没有变化哪怕给数据重新赋值了Vue也是不会做出任何处理的
下面是Vue判断数据有没有变化的源码
function hasChange(x,y) {
if (x===y) {
// +0 -0
return x===0 && 1/x!==1/y
} else {
// NAN
return x===x || y===y
}
}
对于原始数据类型 保持其值不变即可
对于对象类型 保持其引用不变即可
从另一方面来说，由于可以通过保持属性引用稳定来避免子组件的重新多余的渲染
使用v-show替代v-if
对于频繁切换显示状态的元素 使用v-show可以保证虚拟DOM树的稳定，避免频繁的新增元素和删除元素特别是对于那些内部包含大量的DOM元素节点
使用延迟转载(defer)
JS传输完成 浏览器开始执行JS构造页面
但可能一开始要渲染的组件太多 不仅JS执行的时间很长 而且要执行完成后浏览器要渲染的元素过多 从而导致页面白屏
一个可行的方法就是延迟转载组件，让组件按照指定的先后顺序依次一个一个渲染出来
延迟装载是一个思路 本质上就是利用
requestAnimationFrame事件分批渲染内容 它的具体实现多种多样
