Vue.js中Patch函数在更新周期内对旧VNode的清理逻辑-Vue.js-PHP中文网

Vue 的 Patch 函数不销毁旧 VNode，而是通过复用、卸载、替换等策略解除其与 DOM、组件实例、响应式依赖的关联，交由 GC 回收；关键清理发生在组件 unmount 阶段，包括 effect 停止、事件解绑、ref 置空及指令 cleanup。

vue.js中patch函数在更新周期内对旧vnode的清理逻辑

Vue.js 的 Patch 函数（即 patch）在更新过程中，并不会主动“清理”旧 VNode 本身，而是通过复用、卸载、替换等策略，让旧 VNode 自然退出生命周期、脱离 DOM 引用并被 JavaScript 垃圾回收器（GC）回收。所谓“清理”，实质是解除旧 VNode 与 DOM 节点、组件实例、响应式依赖等的关联，避免内存泄漏。

旧 VNode 不会被显式销毁，但会失去引用链

Vue 的 VNode 是纯对象，无自动析构机制。Patch 过程中：

若新旧 VNode 可复用（sameVnode 判断为 true），则只做属性/子节点 diff 更新，旧 VNode 对象仍被保留并复用；
若不可复用（如 tag 不同、key 不同、组件类型变更），旧 VNode 将不再被新渲染树引用，其对应的 DOM 节点会被 removeNode 移除；
对组件 VNode，会触发 unmountComponentAtNode 流程：调用 beforeUnmount → 清理 effect（停止响应式依赖收集）→ 卸载子组件 → 执行 unmounted → 解除对 DOM、refs、watcher 等的持有。

关键清理动作发生在组件卸载阶段

真正涉及“清理”的逻辑集中在组件实例（ComponentInstance）和渲染副作用（ReactiveEffect）层面：

effect 清理：组件 setup 中的响应式副作用（如 watch、computed、模板响应式读取）均注册在组件的 scope 下，unmount 时会自动 stop 所有 effect；
DOM 事件与 ref 解绑：v-on 绑定的事件监听器随 DOM 节点移除而失效（原生事件）；ref 引用（ref="xxx" 或 const el = ref()）在 unmount 后被设为 null；
自定义指令 cleanup：指令的 unmounted 钩子会被调用，开发者需在此手动清理定时器、事件监听、Canvas 上下文等外部资源。

开发者需注意的隐式内存泄漏点

Vue 不会自动清理非 Vue 管理的外部引用，以下情况需手动干预：

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

在 mounted 或 onMounted 中启动的全局事件（window.addEventListener）、定时器（setInterval）、WebSocket 连接；
使用 toRaw 或直接操作原始对象绕过响应式系统，且该对象被闭包长期持有；
第三方库（如 Mapbox、Chart.js）创建的实例未在 beforeUnmount 中 destroy；
使用 provide/inject 传递了可变对象，且接收方未监听其变化或清理订阅。