Vue2项目如何做性能优化

代码层面的优化

1.v-if和v-show区场景使用

• v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建；也是惰性的：如果在初次渲染时条件为假，则什么也不做——直到第一次变为真时才会渲染条件块。
• v-show就简单的多，不管初始条件是什么，元素总是会被渲染，并且只是简单的基于CSS的display属性进行切换。

 2.Computed和method区场景使用

• Computed：计算属性，依赖其它属性值，并且Computed的值有缓存，只有依赖它的属性值发生改变，下一次获取computed的值才会重新计算computed的值。
• 故当我们需要进行数值计算，并且依赖其他数据是，应当使用computed。因为可以利用computed的缓存特性，避免每次取值时都要重新计算。

 3.v-for遍历必须要为item添加key,且避免同时使用v-if

• 在列表数据进行遍历渲染时，需要为每一位item设置唯一的key值，方便Vue内部机制精准找到该条列表数据。当state更新时，新的状态值和旧的状态值对比，较快的定位到diff。
• v-for 比v-if 优先级高(vue2)，如果每一次都需要遍历整个数组，将会影响速度，尤其时只需要渲染很小一部分数据时，必要情况下应当替换替换computed属性。

4.长列表性能优化

• Vue会通过Object.definePropery对数据进行劫持，来实现视图响应数据的变化，然而我们的组件有时只是纯粹的展示数据，不会有任何改变，我们就不需要Vue来劫持我们的数据，在大量数据量展示的情况下，这能很明显的减少组件初始化时间。我们可以用Object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能修改了，这样就能禁止Vue来劫持我们的数据了。
• 虚拟列表进行优化

5.图片资源懒加载

• 对于图片过多的页面，为了加速页面加载速度，所以很多时候我们可以将还未出现在可视区域的图片先不做加载。这样对页面加载性能上会有很打提升，也提高了用户体验。可以在项目中使用Vue的vue-lazyload插件。

6.事件的销毁

7.路由懒加载