【vue2】vue2中的性能优化

在Vue 2中进行性能优化可以从以下几个方面入手：

1. 减少重渲染：使用v-if/v-show代替v-for中的v-show。

2. **优化v-for：

   • 提供key，确保列表渲染的稳定性和高效性。
   • 避免使用非响应式数组的索引作为key。
3. 避免在v-for中使用v-if ：这将导致循环中的每个条目都进行单独的条件渲染。
4. 使用计算属性缓存：复杂的计算属性应该被缓存起来。
5. 避免在watch中做大量的工作：应该使用immediate: true和deep: true选项谨慎。
6. 使用Object.freeze()来避免对象变化：可以阻止Vue追踪依赖。
7. 使用v-once进行单次渲染：适用于内容不会改变的场景。
8. 使用Webpack的terser-webpack-plugin进行代码压缩和树摇（tree-shaking）。
9. 使用服务端渲染SSR：可以预渲染页面，提高首屏加载速度。
10. 使用Vue的生命周期钩子有效管理资源：例如在beforeDestroy和destroyed中清理定时器和订阅。

示例代码：

<template>
  <div>
    <!-- 使用key和v-for时，为每一项提供唯一的key -->
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]
    };
  },
  mounted() {
    // 假设这是一个高频率更新的数据
    setInterval(() => {
      this.items.forEach(item => {
        item.text += ' (updated)'; // 这将触发列表的重新渲染
      });
    }, 1000);
  }
};
</script>

在这个例子中，每次setInterval更新items数组中的text属性时，整个列表都会重新渲染，因为我们没有使用Object.freeze()来冻结对象。优化方法是使用Object.freeze()来防止对象变化：

setInterval(() => {
  this.items = this.items.map(item => {
    const newItem = { ...item };
    newItem.text += ' (updated)';
    return Object.freeze(newItem); // 防止对象变化
  });
}, 1000);

通过使用Object.freeze()，Vue可以追踪到数据的不变性，从而避免不必要的DOM更新。