vue技术栈（1）

Vue项目如何做性能优化

代码层面的优化

 v-if 和v-show区分使用场景

 1.v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

 2. v-show就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于cSS的display属性进行切换。

computed和 method区分使用场景

computed :是计算属性,依赖其它属性值，并且computed 的值有缓存,只有它依赖的属性值发生改变，下一次获取computed 的值时才会重新计算computed 的值;

当我们需要进行数值计算，并且依赖于其它数据时，应该使用computed，因为可以利用computed 的缓存特性,避免每次获取值时，都要重新计算; 

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

 在列表数据进行遍历渲染时,需要为每一项item设置唯一key值，方便Vue.js内部机制精准找到该条列表数据。当state 更新时，新的状态值和旧的状态值对比，较快地定位到diff 。

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成computed 属性

长列表性能优化 

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

 虚拟列表进行优化

 事件的销毁

 图片资源懒加载

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

路由懒加载