面试题：Vue 的 keep-alive 有哪些生命周期钩子？

<keep-alive> 是 Vue 提供的一个内置组件，用于缓存不活动的组件实例，避免重复渲染和销毁。当组件被 <keep-alive> 包裹时，它会触发特定的生命周期钩子。

`keep-alive` 特有的生命周期钩子

当组件被 <keep-alive> 缓存时，会触发以下两个特有的生命周期钩子：

1. `activated`

调用时机：当被 <keep-alive> 缓存的组件再次被激活时调用。
用途：通常用于在组件重新显示时执行一些操作，如重新获取数据、启动定时器等。

export default {
  activated() {
    console.log('Component activated');
    // 例如：重新获取数据
    this.fetchData();
  }
};

2. `deactivated`

调用时机：当被 <keep-alive> 缓存的组件被停用时调用。
用途：通常用于在组件被隐藏时执行一些清理操作，如清除定时器、取消请求等。

export default {
  deactivated() {
    console.log('Component deactivated');
    // 例如：清除定时器
    clearInterval(this.timer);
  }
};

普通生命周期钩子的行为

当组件被 <keep-alive> 缓存时，普通的生命周期钩子（如 mounted 和 destroyed）的行为会发生变化：

mounted：只在组件第一次渲染时调用，之后如果组件被缓存，再次激活时不会调用。
destroyed：当组件被 <keep-alive> 缓存时，不会调用 destroyed 钩子，因为组件实例并没有被销毁。

示例

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

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

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

在 ComponentA 和 ComponentB 中，可以定义 activated 和 deactivated 钩子：

// ComponentA.vue
export default {
  mounted() {
    console.log('ComponentA mounted');
  },
  activated() {
    console.log('ComponentA activated');
  },
  deactivated() {
    console.log('ComponentA deactivated');
  },
  destroyed() {
    console.log('ComponentA destroyed');
  }
};