vue性能优化方案总结

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 的值，避免每次获取值时，都要重新计算 。
  • watch：监听属性，每当监听的数据变化时都会执行回调进行后续操作，当需要在数据变化时，执行异步操作或开销较大的操作时，应该使用watch。