Vue性能优化

​

一、Object.freeze()

如果我们已知该数据是不会改变的，就不需要Vue将其设置成响应式的了，利用 Object.freeze()，该方法可以冻结一个对象，使该对象不能被修改。Vue就不能够为对象添加，setter getter等数据劫持的方法。

二、v-if 和 v-show

v-if 会根据条件进行元素的销毁和重建，如果初始状态下条件为假，则根本不会渲染。

v-show 不论条件是什么都会渲染元素，只是基于 css 的 display 属性进行切换。

综上，v-if 适用于元素很少进行显示与隐藏的切换，而v-show适用于，元素需要频繁的进行切换。

三、computed和watch的使用

computed和watch都有监听数据的作用，但两者使用上有所不同。

computed 是计算属性，是描述依赖响应式状态的复杂逻辑，也就是说，计算出来的值，是依赖vue中其他的响应式数据的。

watch 是侦听器，用来监听数据的改变，并执行一些操作。

他们之间的不同除了应用场景外，计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。

四、v-for key 和 v-if

v-for 遍历时要给遍历的元素添加一个 key（唯一） ，这样做是为了方便vue内部准确找到该元素，当数据变化时根据key对比，从而判断是否复用旧节点。；且避免同时使用 v-if，因为v-for的优先级比v-if高，每次都会先遍历整个数组；可以先把数据筛选好了在进行遍历，不要用 v-if 再进行判断了。

五、事件的销毁

Vue组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。如果在 js 内，我们需要手动关闭定时器，取消订阅的消息，解除自定义事件等收尾操作。

六、图片懒加载

vue-lazyload 插件

七、路由懒加载

八、第三方插件按需引入

可以减小项目体积

九、使用 keep-alive 缓存组件

通过<keepAlive>组件强制被切换掉的组件仍然保持“存活”的状态。

​