要实现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; }
注意事项
- 只有被
<keep-alive>包裹的组件才会触发 - 组件首次加载不会触发，仅切换时生效
- 与
v-show不同，deactivated是完整的组件卸载（但被缓存）
路由守卫替代方案
对于非缓存组件，可使用路由守卫实现类似效果：
beforeRouteLeave(to, from, next) {
// 离开路由前的逻辑
next();
}
