Vue常见优化手段
永远不要过早优化，因为优化可能会让我们的代码变得难以维护，只有真的遇到性能问题了，再考虑优化
使用key
对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素。
使用冻结的对象
冻结的对象不会被响应化
使用函数式组件
参考：v2.cn.vuejs.org/v2/guide/re…
在Vue.component中将组件标记为functional:true,这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)
使用计算属性
可以缓存，跟随依赖
非实时绑定的表单项
当使用v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染(rerender)，这将带来一些性能的开销。
我们可以通过使用lazy或不使用v-model的方式解决该问题，但要注意！这样可能会导致在某一时间段内数据和表单项的值是不一致的。
⭐理解为v-model是@input的效果，v-model.lazy是@change的效果。
@change在输入框发生变化且失去焦点后出发 a @input在输入框内容发生变化后出发(在界面加载数据之前) a @blur失去焦点就触发 a ⭐@change先于@blur，@input和@change的默认参数为输入内容，而@blur的默认参数为dom节点
⭐切记，优化一定是 它真的造成了性能问题 ，才要去做。
保持对象引用稳定
在绝大部分情况下，vue触发rerender的时机是其依赖的数据发生变化。
若数据没有发生变化，哪怕给数据重新赋值了，vue也是不会做任何处理的
下面是vue判断数据没有变化的源码：
function hasChanged(x,y){
if(x===y){
//排除 +0和-0的情况，因为 1/+0 为Infinity(正无穷) 1/-0 为-Infinity(负无穷)
return x === 0 && 1 / x !== 1 / y
} else {
// 排除NaN的情况，因为 NaN===NaN 为 false
return x === x || y === y
}
}
因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染。
对于原始数据类型，保持其值不变即可。
对于引用数据类型，保持其引用(地址)不变即可。
从另一方面说，由于可以通过保持属性引用稳定来避免子组件的重渲染，那么我们应该细分组件来尽量避免多余的渲染。
例子：从数据库请求来遍历展示的数据，如果不需要频繁更新，那么可以在组件中用变量将其存储，不需要每次都重新请求然后替换掉原数据(每次替换引用肯定会变，那么就会触发重渲染)。
v-show v-if
对于频繁切换显示状态的元素，使用v-show可以保证虚拟dom树的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量dom元素的节点，这一点极其重要。
使用延迟装载(defer)
延迟装载是一个思路，本质上就是利用
requestAnimationFrame事件分批渲染内容，它的具体实现很多样
JS传输完成后，浏览器开始执行JS构造页面。
但可能一开始要渲染的组件太多，不仅JS执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏
延迟装载组件，让组件按照执行的先后顺序依次一个一个渲染出来
React的fiber的思路 但react更细致
