面试题：Vue中Keep - Alive如何缓存组件状态

Keep - Alive缓存组件状态原理

基本概念：Keep - Alive是Vue提供的一个抽象组件，它自身不会渲染成一个DOM元素，也不会出现在父组件链中。其主要作用是在组件切换过程中，将不活动的组件缓存起来，而不是销毁它们，这样可以避免重复创建和销毁组件带来的性能开销。
缓存实现：Keep - Alive内部通过一个对象（假设为cache）来存储缓存的组件实例。当一个组件被Keep - Alive包裹且首次渲染时，它会被创建并添加到cache对象中，以组件的key作为标识（如果没有指定key，则会使用组件的name或其自身作为key）。当组件切换，该组件变为非活动状态时，它不会被销毁，而是被保留在cache中。当下次再次需要渲染该组件时，会直接从cache中取出已缓存的组件实例进行复用，而不是重新创建新的实例。

组件内配合Keep - Alive实现特定状态的缓存与恢复示例

假设我们有一个计数器组件Counter.vue：

<template>
  <div>
    <p>计数: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  activated() {
    // 组件被激活时（从缓存中取出并渲染）
    console.log('组件被激活，恢复状态');
  },
  deactivated() {
    // 组件被停用时（被缓存起来）
    console.log('组件被停用，缓存状态');
  }
};
</script>

在父组件中使用Keep - Alive包裹Counter.vue：

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

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

export default {
  components: {
    Counter
  },
  data() {
    return {
      showCounter: true
    };
  },
  methods: {
    toggleComponent() {
      this.showCounter = !this.showCounter;
    }
  }
};
</script>

在上述示例中，Counter组件内定义了count数据，在点击按钮增加计数后，当通过toggleComponent方法切换组件（实际上是隐藏和显示Counter组件）时，由于Counter被Keep - Alive包裹，count状态会被缓存。当再次显示Counter组件时，会恢复到之前缓存的状态。activated和deactivated钩子函数分别在组件从缓存中取出渲染和被缓存时触发，可以在这些钩子函数中执行一些特定的逻辑，比如数据的恢复或保存等操作。

星途面试题库

面试题：Vue中Keep - Alive如何缓存组件状态

知识考点

面试题答案

Keep - Alive缓存组件状态原理

组件内配合Keep - Alive实现特定状态的缓存与恢复示例