Vue 的 Patch 函数不销毁旧 VNode，而是通过复用、卸载、替换等策略解除其与 DOM、组件实例、响应式依赖的关联，交由 GC 回收；关键清理发生在组件 unmount 阶段，包括 effect 停止、事件解绑、ref 置空及指令 cleanup。
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 管理的外部引用，以下情况需手动干预：
立即学习“前端免费学习笔记（深入）”；
- 在
mounted或onMounted中启动的全局事件（window.addEventListener）、定时器（setInterval）、WebSocket 连接； - 使用
toRaw或直接操作原始对象绕过响应式系统，且该对象被闭包长期持有； - 第三方库（如 Mapbox、Chart.js）创建的实例未在
beforeUnmount中 destroy； - 使用
provide/inject传递了可变对象，且接收方未监听其变化或清理订阅。
如何验证旧 VNode 是否已安全释放
可通过 Chrome DevTools 的 Memory 面板进行快照比对：
- 在组件挂载后拍一次堆快照，筛选
VNode或组件名，记录数量； - 触发路由跳转或 v-if 切换使组件卸载；
- 强制 GC（点击垃圾箱图标），再拍一次快照，对比相同关键词的实例是否减少；
- 若残留大量 VNode 或组件实例，说明存在未解绑的引用（如 event listener、effect、闭包变量）。
不复杂但容易忽略的是：VNode 本身无需“销毁”，但围绕它的响应式系统、DOM 关联和外部资源必须由 Vue 生命周期或开发者协同清理。
