vue缓存多出的生命周期

### Vue 中与缓存相关的生命周期钩子

#### 组件激活与停用的生命周期钩子

`activated` 和 `deactivated` 是 Vue 组件中的两个生命周期钩子，专门用于管理组件在激活和停用时的行为。这两个钩子通常与 `<keep-alive>` 标签配合使用，以实现组件的状态保持功能[^1]。

- **activated**: 当组件通过 `<keep-alive>` 缓存并重新进入视图时触发此钩子。这表示组件再次变得活跃可见。

- **deactivated**: 当组件因其他组件替换而不再处于活动状态时会触发这个钩子。此时虽然组件不可见但仍保存其内部状态而不销毁实例对象[^2]。

export default {
  name: 'MyComponent',
  activated() {
    console.log('Component is now active');
    // 可在此处恢复一些资源或重置数据
  },
  deactivated() {
    console.log('Component has been deactivated');
    // 清理工作可以在这里完成，比如清除计时器、取消订阅等
  }
}

#### 使用场景说明

这类钩子非常适合用来控制那些只应在组件首次加载之后每次展示前后的逻辑处理任务，例如：

- 开启/关闭某些监听事件；
- 启动/停止定时器或其他后台进程；
- 加载最新的用户偏好设置或网络请求的数据更新[^3]。

相关问题

vue缓存组件的生命周期

Vue组件的生命周期与缓存的使用并没有直接的关系。不过，如果使用了keep-alive组件来缓存组件，那么被缓存的组件会有一些特殊的生命周期钩子函数，包括activated和deactivated钩子函数。

activated钩子函数会在组件被激活时调用，也就是从缓存中取出并渲染到页面上时。可以在该钩子函数中执行一些需要在组件被激活时执行的操作，例如数据初始化、网络请求等。

deactivated钩子函数会在组件被缓存之前调用，也就是组件从页面上卸载并被缓存时。可以在该钩子函数中执行一些需要在组件被缓存之前执行的操作，例如清除定时器、取消网络请求等。

vue3缓存路由生命周期

引用提到，Vue中有两个特殊的生命周期函数activated和deactivated，只有在设置了路由缓存keep-alive时才能生效。其中，activated的作用相当于created函数。因此，在Vue3中，当路由使用了缓存时，可以利用activated生命周期函数来同步注册组件传过来的参数。