当前位置：首页 > VUE

要实现vue deactivated

2026-02-18 09:34:24VUE

Vue 中的 deactivated 生命周期钩子

deactivated 是 Vue 组件的一个生命周期钩子，属于 <keep-alive> 缓存组件的特有钩子。当组件被 <keep-alive> 包裹且从 DOM 中移除（但未销毁）时触发，通常与 activated 钩子配对使用。

使用场景

组件被 <keep-alive> 缓存后切换出视图时触发。
适合执行清理操作（如取消定时器、移除事件监听）或保存组件状态。

基本用法

在 Vue 组件中直接定义 deactivated 钩子：

export default {
  deactivated() {
    console.log('组件被停用，进入缓存状态');
    // 执行清理逻辑，如清除定时器
    clearInterval(this.timer);
  }
}

结合 `<keep-alive>` 使用

确保组件被 <keep-alive> 包裹才能触发此钩子：

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

与 `activated` 的配合

activated 在组件从缓存重新激活时触发，二者常配合使用：

export default {
  activated() {
    console.log('组件重新激活');
    this.timer = setInterval(() => {
      // 执行某些操作
    }, 1000);
  },
  deactivated() {
    console.log('组件停用');
    clearInterval(this.timer);
  }
}

注意事项

非 <keep-alive> 包裹的组件不会触发 deactivated。
组件首次加载时不会触发 deactivated，仅在后续切换时触发。
销毁逻辑（如 beforeDestroy）仍需保留，因为 deactivated 不保证组件最终销毁。

实际应用示例

假设有一个需要保存滚动位置的列表组件：

要实现vue deactivated

export default {
  data() {
    return {
      scrollPosition: 0
    };
  },
  activated() {
    // 恢复滚动位置
    this.$el.scrollTop = this.scrollPosition;
  },
  deactivated() {
    // 保存滚动位置
    this.scrollPosition = this.$el.scrollTop;
  }
}