要实现vue deactivated

在Vue中，deactivated是<keep-alive>组件特有的生命周期钩子，用于捕获被缓存的组件失活状态。以下是实现方法和关键点：

基本用法

当组件被<keep-alive>包裹且切换出视图时触发：

export default {
  deactivated() {
    console.log('组件被缓存');
    // 执行清理操作或暂停后台任务
  }
}

结合<keep-alive>使用

需确保组件被正确包裹：

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

与activated配对使用

通常需要实现激活状态的对应逻辑：

export default {
  activated() {
    console.log('组件被激活');
    // 恢复数据或重启任务
  },
  deactivated() {
    console.log('组件被停用'); 
    // 暂停定时器、取消事件监听等
  }
}

典型应用场景

• 清除定时器

  deactivated() {
  clearInterval(this.timer);
  }

• 保存滚动位置

  data() {
  return { scrollTop: 0 }
  },
  deactivated() {
  this.scrollTop = document.documentElement.scrollTop;
  }

注意事项

1. 只有被<keep-alive>包裹的组件才会触发
2. 组件首次加载不会触发，仅切换时生效
3. 与v-show不同，deactivated是完整的组件卸载（但被缓存）

路由守卫替代方案

对于非缓存组件，可使用路由守卫实现类似效果：

beforeRouteLeave(to, from, next) {
  // 离开路由前的逻辑
  next();
}