面试题：Vue条件渲染中的动态组件优化

数据缓存：
- 组件内数据缓存：
  - 在每个组件内部，对于一些不经常变化且计算开销大的数据，可以使用变量进行缓存。例如，如果组件需要计算一个复杂的数组变换结果，可以在组件的data中定义一个变量来存储这个结果，当下次需要使用时，先检查这个变量是否有值，如果有则直接使用，避免重复计算。
  - ```
  data() {
    return {
      cachedData: null
    };
  },
  methods: {
    computeComplexData() {
      if (!this.cachedData) {
        // 复杂计算逻辑
        this.cachedData = someComplexComputation();
      }
      return this.cachedData;
    }
  }
```
- 外部缓存：
  - 如果不同组件之间有共享且不常变化的数据，可以使用Vuex进行缓存管理。将这些数据存储在Vuex的state中，各个组件通过mapState辅助函数获取数据，避免每个组件重复初始化这部分数据。
  - ```
  // store.js
  const store = new Vuex.Store({
    state: {
      sharedData: null
    },
    mutations: {
      setSharedData(state, data) {
        state.sharedData = data;
      }
    }
  });
  
  // ComponentA.vue
  import { mapState } from 'vuex';
  export default {
    computed: {
      ...mapState(['sharedData'])
    }
  };
```
生命周期钩子函数：
- 使用activated和deactivated钩子：
  - 对于频繁切换的动态组件，activated钩子在组件被插入到DOM中时调用，deactivated钩子在组件从DOM中移除时调用。
  - 在activated钩子中，可以进行一些必要的初始化操作，如请求数据等，但要确保这些操作是必要的且尽量轻量。例如：
  - ```
  activated() {
    if (!this.cachedData) {
      this.fetchData();
    }
  }
```
- 在deactivated钩子中，可以进行一些清理操作，如取消定时器、解绑事件监听器等，以防止内存泄漏。
- ```
deactivated() {
  clearTimeout(this.timer);
  window.removeEventListener('scroll', this.handleScroll);
}
```
- 避免在created和mounted中进行过多初始化：
  - 由于created和mounted钩子在组件每次创建和挂载时都会调用，而动态组件频繁切换会导致这些钩子频繁执行。因此，尽量将可以延迟到activated钩子执行的操作放在activated中，减少不必要的初始化开销。
使用keep - alive组件：
- 将动态组件包裹在keep - alive组件内。keep - alive会缓存不活动的组件实例，而不是销毁它们。
- ```
<keep - alive>
  <component :is='currentComponent'></component>
</keep - alive>
```
- 这样，当currentComponent切换时，被切换掉的组件不会被销毁，而是被缓存起来，下次再切换回来时可以直接使用缓存的实例，避免重新初始化，大大提高性能。同时，配合activated和deactivated钩子，在组件被激活和停用（缓存）时执行相应的逻辑。

星途面试题库

面试题：Vue条件渲染中的动态组件优化

知识考点

面试题答案