vue性能优化方案总结
1.问题描述:
- 目前Vue虽然被广泛应用,但是其存在项目首屏优化,Webpack编译配置优化等问题,所以我们仍然需要去关注Vue项目性能方面的优化,使项目具有更高效的性能,更好的用户体验。
2.解决方案:
-
1.v-for与v-if避免同时使用:
- v-for 比 v-if 优先级高,如果每一次都需要遍历整个数组,将会影响速度且浪费性能,尤其是当之需要渲染很小一部分的时候,正确做法是使用 computed 属性(通过computed对要遍历的数组先进行筛选,再进行遍历渲染)。
-
2.v-for在列表数据进行遍历渲染时,需要为每一项 item 设置唯一 key 值,方便 Vue.js 内部机制精准找到该条列表数据。当 data 更新时,便于新的状态值和旧的状态值对比,较快地定位到 diff 。
-
3.computed与watch的使用:
- computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,
只有它依赖的属性值发生改变,下
- computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,