面试题：Vue的keep - alive动态激活组件的应用场景及实现方式

适合使用keep - alive动态激活组件的场景

频繁切换但希望保留状态的组件：例如一个多步骤的表单组件，用户在不同步骤间切换，希望切换回来时保留之前填写的数据和状态。
开销较大的组件：某些组件初始化渲染成本高，如包含复杂图表绘制或大量数据加载的组件，频繁销毁和重建会消耗性能，使用keep - alive缓存可避免重复开销。

Vue代码示例

<template>
  <div>
    <button @click="toggleKeepAlive">切换keep - alive状态</button>
    <keep - alive v - if="shouldKeepAlive">
      <MyComponent />
    </keep - alive>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      shouldKeepAlive: true
    };
  },
  methods: {
    toggleKeepAlive() {
      this.shouldKeepAlive =!this.shouldKeepAlive;
    }
  }
};
</script>

性能影响及优化

性能影响：
- 优点：减少组件重复渲染的开销，提升用户体验，特别是对于频繁切换且渲染成本高的组件。当组件被缓存时，再次激活只需从缓存中取出，而无需重新创建和初始化。
- 缺点：会占用更多内存，因为缓存的组件实例一直存在内存中。如果缓存的组件过多或组件本身占用内存较大，可能导致内存溢出等问题。
优化：
- 合理控制缓存范围：只对确实需要缓存的组件使用keep - alive，避免不必要的组件被缓存。
- 及时清理缓存：在适当的时机（如用户离开相关页面、组件不再使用等），通过动态控制keep - alive的条件，释放不再需要的缓存组件，以减少内存占用。例如在上述代码中，根据业务逻辑适时调用toggleKeepAlive方法。

星途面试题库

面试题：Vue的keep - alive动态激活组件的应用场景及实现方式

知识考点

面试题答案

适合使用keep - alive动态激活组件的场景

Vue代码示例

性能影响及优化