要实现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时组件实例仍被保留，数据不会丢失
