要实现vue deactivated

Vue 组件的 deactivated 生命周期钩子

在 Vue.js 中，deactivated 是 <keep-alive> 缓存组件特有的生命周期钩子。当组件被 <keep-alive> 包裹并从 DOM 中移除（但未被销毁）时触发，通常发生在路由切换或动态组件切换时。

基本用法

组件需被 <keep-alive> 包裹才能触发 deactivated：

<template>
  <keep-alive>
    <my-component v-if="showComponent" />
  </keep-alive>
</template>

在组件中定义钩子：

export default {
  deactivated() {
    console.log('组件被停用');
    // 可在此执行清理操作，如暂停定时器、取消事件监听等
  }
}

典型使用场景

清理资源

deactivated() {
  clearInterval(this.timer); // 清除定时器
  window.removeEventListener('resize', this.handleResize); // 移除事件监听
}

保存组件状态

data() {
  return {
    scrollPosition: 0
  };
},
deactivated() {
  this.scrollPosition = window.scrollY; // 保存滚动位置
},
activated() {
  window.scrollTo(0, this.scrollPosition); // 恢复滚动位置
}

注意事项

• deactivated 需与 activated 配对使用，前者在离开缓存时触发，后者在重新进入缓存时触发
• 未被 <keep-alive> 包裹的组件不会触发这两个钩子
• 与 destroyed 不同，deactivated 时组件实例仍被保留，数据不会丢失