要实现vue deactivated

在 Vue.js 中，deactivated 是 <keep-alive> 组件的一个生命周期钩子，用于在组件被缓存时触发。以下是实现 deactivated 的方法和注意事项：

使用 <keep-alive> 包裹组件

确保目标组件被 <keep-alive> 包裹，否则 deactivated 不会被触发。例如：

<keep-alive>
  <component-to-cache />
</keep-alive>

在组件中定义 deactivated 钩子

在需要缓存的组件中，直接定义 deactivated 方法：

export default {
  deactivated() {
    console.log('组件被缓存');
    // 执行清理逻辑或状态保存
  }
}

结合 activated 使用

通常 deactivated 会与 activated 配对使用，分别处理组件激活和缓存的逻辑：

export default {
  activated() {
    console.log('组件被激活');
    // 恢复数据或重新初始化
  },
  deactivated() {
    console.log('组件被缓存');
    // 保存状态或释放资源
  }
}

动态组件中的用法

如果配合动态组件切换，deactivated 会在组件被替换时触发：

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

注意事项

• deactivated 仅在组件被 <keep-alive> 缓存时生效，直接销毁组件不会触发。
• 避免在此钩子中执行耗时操作，可能影响页面切换性能。
• 可通过 include/exclude 属性控制哪些组件需要缓存。

路由场景下的使用

在 Vue Router 中，可通过路由配置的 meta 字段实现条件缓存：

{
  path: '/detail',
  component: Detail,
  meta: { keepAlive: true }
}

并在路由视图中绑定：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />