前提：永远不要过早地优化，仅在影响运行、卡的不行的时候才优化 [参考]
代价：代码会变得难以阅读，开发难度增大
使用key
对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改造元素。
一般使用ID作为Key
使用冻结的对象
冻结的对象（里面的属性值都不能改动）不会被响应化。Object.freeze()。
原因：data中的对象内的属性可能是对象，需要递归遍历进行响应式，需要消耗时间。
效果：冻结的对象，vue会跳过proxySetter的过程，如果对象很多则会消耗大量时间。
使用场景：当数据不需要改动，则无需设置成响应式。
判断对象是否被冻结：Object.isFrozen()。
使用函数式组件
参考文档
函数式组件没有data，无状态，渲染快，耗时短，占用的内存小。
vue不会为函数式组件创建VueComponent组件实例，不会生成到组件树中。
使用计算属性
如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存他们
非实时绑定的表单项
当使用 v-model 绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致 vue 发生重渲染 ( rerender )，这会带来一些性能的开销。
我们可以通过使用 Lazy 或不使用 v-model 的方式解决该问题，但要注意，这样可能会导致在某一个时间段内数据和表单项的值是不一致的。
input框v-model="abc"，@input="abc = $event.target.value"，:value="abc"; lazy会使得原来绑定的input事件变成change事件。
保持对象引用稳定
在绝大部分情况下，vue 触发 rerender 的时机是其一栏的数据发生变化。
若数据没有发生变化，哪怕给数据重新赋值了，vue也是不会做出任何处理的。
下面是 vue 判断数据没有变化的源码
function hasChanged(x, y) {
if (x === y) {
return x === 0 && 1 / x !== 1 / y;
} else {
return x === x || y === y;
}
}
因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染。
对于原始数据类型，保持其值不变即可。
对于对象类型，保持其引用不变即可。
从另一方面来说，由于可以通过保持属性引用稳定来避免子组件的重渲染，那么我们应该细分组件尽量避免多余的渲染。
使用v-show代替v-if
对于频繁切换显示状态的元素，使用v-show可以保证虚拟dom树的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量dom元素的节点，这一点极其重要。
关键字：频繁切换显示状态、内部包含大量dom元素。
使用延迟装载(defer)
JS传输完成后，浏览器开始执行JS构造页面。
但可能一开始要渲染的组件太多，不仅JS执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏。
一个可行的办法就是延迟装载组件，指定的先后顺序依次一个一个渲染出来。
延迟装载是一个思路，本质上就是利用 requestAnimationFrame 事件分批染内容，它的具体实现多种多样
使用keep-alive
长列表优化
打包体积优化
标签：vue,渲染,对象,数据,常见,使用,组件,优化 From： https://www.cnblogs.com/crispyChicken/p/17210792.html