keep-alive 对印的钩子函数

`keep-alive` 是 Vue.js 中的一个内置组件，用于缓存和复用已经渲染过的组件实例，从而提高应用性能并减少资源消耗。当组件被 `keep-alive` 包裹时，Vue 将记住该组件的渲染结果并在切换到其他组件后将其保留起来。

对于包裹在 `keep-alive` 组件内的组件来说，Vue 提供了一些特殊的生命周期钩子函数（也称为自定义过渡钩子）来处理组件激活和停用时的行为。这些钩子函数包括：

1. **activated()**
- 这个钩子会在组件变得可见（从不可见变为可见）时调用。
- 只有当组件是处于活动状态并且正在加载或重新加载数据时才触发这个钩子。
- 这个钩子通常用来执行依赖于组件数据的操作，如请求数据、更新界面等。

2. **deactivated()**
- 当组件不再可见（从可见变为不可见）时，这个钩子会被调用。
- 如果组件被 `keep-alive` 缓存，则在切换到另一个组件后此组件将被隐藏但不会销毁，这时 `deactivated()` 钩子就会被执行。
- 这个钩子可以用来释放不必要的计算资源、停止定时器或其他可能在组件未使用时不需要运行的任务。

### 使用示例

假设我们有一个名为 `MyComponent` 的组件，我们希望在激活时加载数据并在离开时释放资源：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello!'
    };
  },
  activated() {
    // 数据加载或更新逻辑在此执行
    this.fetchData();
  },
  deactivated() {
    // 在离开组件前进行资源清理操作
    this.clearResources();
  },
  methods: {
    fetchData() {
      // 示例：从服务器获取数据
      console.log('Fetching data...');
    },
    clearResources() {
      // 示例：清除缓存、关闭连接等操作
      console.log('Clearing resources...');
    }
  }
};
</script>

### 相关问题

1. `keep-alive` 如何决定何时保存和恢复组件？
2. `activated()` 和 `deactivated()` 钩子分别在什么情况下被触发？
3. 是否可以在同一个组件内部同时覆盖多个生命周期钩子函数？如何实现这一点？
4. `keep-alive` 是否支持异步组件？如何配置使其正常工作？