Vue.js 怎么优化性能

// 优化响应式系统
export default {
  data() {
    return {
      heavyData: {},
      computedData: null
    };
  },
  watch: {
    heavyData: {
      handler(newVal) {
        this.computedData = this.computeHeavyData(newVal);
      },
      deep: true
    }
  },
  methods: {
    computeHeavyData(data) {
      // 这里执行一些耗时的计算
      return result;
    }
  }
};

// 优化虚拟 DOM
export default {
  render(h) {
    return h('div', [
      h('p', 'Static content'),
      this.shouldRenderHeavyComponent ? h(HeavyComponent) : null
    ]);
  }
};

// 保持组件简单
export default {
  props: ['data'],
  computed: {
    processedData() {
      return processData(this.data); // 外部函数处理复杂逻辑
    }
  }
};

// 使用 keep-alive
<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

<!-- v-if vs v-show -->
<div v-if="condition">Content that rarely changes</div>
<div v-show="condition">Content that changes frequently</div>

// 异步组件加载
const HeavyComponent = () => import('./HeavyComponent.vue');

// 虚拟滚动
import { VirtualScroller } from 'vue-virtual-scroller';

export default {
  components: { VirtualScroller },
  data() {
    return {
      items: Array(10000).fill().map((_, index) => ({ id: index, name: `Item ${index}` }))
    };
  }
};

// Webpack 配置
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};