Vue 组件缓存怎么配合 deactivated 钩子函数执行组件停用时的收尾-Vue.js-PHP中文网

组件缓存配合deactivated钩子需精准清理运行中资源：定时器、事件监听、websocket、动画帧等，避免内存泄漏；应统一管理句柄、判空防护、不修改响应式数据，并与activated配对启停。

vue 组件缓存怎么配合 deactivated 钩子函数执行组件停用时的收尾

组件缓存配合 deactivated 钩子，核心是「组件不销毁、但要暂停运行」——它不是退出，而是进入后台待命状态。所以收尾动作必须精准：只清理“正在跑”的资源，不碰已缓存的数据和状态。

哪些资源必须在 deactivated 里手动清理

被 <keep-alive></keep-alive> 缓存的组件不会触发 beforeUnmount 或 unmounted，更不会执行 destroyed（Vue 2）或 beforeDestroy。所有依赖 DOM 存在、持续占用系统资源的逻辑，都得靠 deactivated 主动关停：

定时器（setInterval / setTimeout）—— 不清会持续执行，造成内存泄漏和逻辑错乱
事件监听器（尤其是全局或第三方库绑定的，如 window.addEventListener、document.addEventListener）—— 缓存中重复激活可能叠加监听
WebSocket 或长连接（如 EventSource）—— 停用时应关闭连接，避免后台持续通信
动画帧请求（requestAnimationFrame）—— 不停会导致 CPU 空转

怎么写才安全可靠

关键原则：变量可访问、清理可逆、避免副作用。推荐统一管理清理句柄，而不是零散调用：

Vue-router参考手册

Vue-router参考手册下载

下载

把定时器 ID、监听器引用、连接实例等存为 data 或 ref，确保 deactivated 能读到
清理前加判空，防止重复调用或未初始化就清理（比如组件还没挂载完就被停用）
不要在 deactivated 中修改响应式数据（如 this.form = {}），这会破坏缓存意图；如需暂存，用本地变量或 sessionStorage

示例（Vue 3 Composition API）：

const timer = ref(null)
const socket = ref(null)

onMounted(() => {
  timer.value = setInterval(() => { /* ... */ }, 3000)
  socket.value = new WebSocket('wss://...')
  window.addEventListener('resize', handleResize)
)

onDeactivated(() => {
  if (timer.value) clearInterval(timer.value)
  if (socket.value && socket.value.readyState === WebSocket.OPEN) socket.value.close()
  window.removeEventListener('resize', handleResize)
)

和 activated 的配合逻辑

deactivated 和 activated 是一对镜像操作，不是孤立存在的：

所有在 activated 中启动的资源（如重新开定时器、重连 WebSocket、重新监听 resize），都应在 deactivated 中对应关闭
避免在 activated 中重复初始化 —— 比如定时器已存在就不新建；同样，deactivated 里也不必反复判断是否已清理，一次清理到位即可
若组件有异步加载逻辑（如分页滚动加载），可在 deactivated 中取消 pending 的请求（用 AbortController），防止返回后更新错误实例