使用Vue开发中遇到的性能优化问题及解决方法

// 异步组件写法
Vue.component('lazy-component', () => import('./LazyComponent.vue'));

<template>
  <div>
    <ul>
      <li v-for="item in visibleItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      visibleItems: [],
      startIndex: 0,
      endIndex: 10,
      pageSize: 10
    };
  },
  mounted() {
    // 模拟获取数据
    this.items = this.fetchData();
    this.visibleItems = this.items.slice(this.startIndex, this.endIndex);
  },
  methods: {
    fetchData() {
      // 模拟获取数据
      // ...
    },
    loadMore() {
      this.startIndex += this.pageSize;
      this.endIndex += this.pageSize;
      this.visibleItems = this.items.slice(this.startIndex, this.endIndex);
    }
  }
};
</script>

<template>
  <div>
    <keep-alive>
      <component :is="component"></component>
    </keep-alive>
    <button @click="toggleComponent">切换组件</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      component: ComponentA
    };
  },
  methods: {
    toggleComponent() {
      this.component = this.component === ComponentA ? ComponentB : ComponentA;
    }
  }
};
</script>