Vue项目性能优化 - Githubissues

Vue代码层面的优化

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

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

显然v-if 的频繁切换性能较差，而v-show 的频繁切换性能较好。所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景，v-show 则适用于频繁切换条件的场景。

computed 和watch 区分使用场景 computed：计算属性，依赖其它属性值，且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed值时才会重新计算computed的值。

watch：更多的是观察的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

当需要进行数值计算并且依赖于其它数据时，应该使用computed，因为可以利用computed的缓存特性，避免每次获取值时，都要重新计算。而需要在数据变化时执行异步或开销较大的操作时，应该使用watch。

v-for 遍历必须为item添加key，且避免同时使用v-if 使用v-for进行遍历渲染时为每一项item设置唯一key值已经是习惯了，这方便Vue内部机制快速精准的找到该条item的数据。当state更新时，新的状态值和旧的状态值对比，较快的定位到diff

v-for 遍历时避免使用v-if。因为v-for 比 v-if 优先级高，如果每一次都要遍历整个数组，会影响速度。

长列表性能优化 Vue实现数据视图双向绑定的原理是使用Object.defineProperty对数据进行劫持，来实现视图响应数据变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，就不需要Vue来劫持我们的数据。在大量数据展示的情况下，这能很明显的减少组件初始化的时间。如何禁止Vue劫持数据？可以使用Object.frezz方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");

    this.users = Object.freeze(users);
  }
};

同时需要说明，这里只是冻结了users的值，引用不会被冻结，当我们需要reactive数据的时候，我们可以重新给users赋值。

methods: {
    handelClick() {
      const newArr = [7, 8, 9, 10];
      this.users = newArr;
    }
  }

LastPoem / Restart

Vue项目性能优化 #57

Vue代码层面的优化