Vue组件必须通过v-if或:is控制销毁，element.remove()仅移除DOM节点而无法触发unmounted钩子，会导致内存泄漏；正确做法是先更新响应式状态使组件卸载，再手动清理DOM。
element.remove() 不能销毁 Vue 组件实例
直接调用 element.remove() 只会从 DOM 中移除节点，但对应的 Vue 组件实例依然存活在内存中，beforeUnmount 和 unmounted 钩子不会触发，响应式数据、定时器、事件监听器也不会被清理——这是最常见的内存泄漏源头。
典型现象：组件里用了 setInterval 或 addEventListener，手动 remove() 后发现定时器还在跑、事件还在响应。
- Vue 的卸载逻辑必须由框架控制，不能绕过
v-if、v-for或 -
element.remove()是原生 DOM 操作，和 Vue 的响应式系统完全脱节 - 即使组件已从 DOM 移除，只要它的实例仍被 JS 变量引用（比如存了
ref），就不会被 GC 回收
动态组件该用 v-if 或 :is 控制生命周期
真正销毁组件实例，必须让 Vue 主动触发卸载流程。两种主流方式：
- 用
v-if控制组件渲染：值为false时，Vue 自动调用unmounted钩子，并释放实例 - 用
currentComp变为null或undefined，当前组件会被卸载
示例（组合式 API）：
const showPanel = ref(true)
// 销毁组件：只需设为 false
const destroyPanel = () => { showPanel.value = false }
模板中写：
需要强制移除 DOM 节点？先卸载再移除
极少数场景（比如集成第三方库、做动画过渡）确实要手动操作 DOM 节点，但必须确保组件已卸载：
- 先通过响应式状态让组件消失（如设
v-if条件为false），等待nextTick - 再用
element.remove()清理残留的空容器或过渡 DOM
错误写法：
const el = document.getElementById('my-comp')
el.remove() // ❌ 组件实例还在运行
正确顺序：
showPanel.value = false // 触发卸载
await nextTick() // 等待 Vue 完成 DOM 更新和钩子执行
const el = document.getElementById('my-comp')
if (el) el.remove() // ✅ 此时 DOM 节点已无关联实例
用 teleport + v-if 管理弹窗类动态组件
弹窗、提示框这类脱离主结构的组件，常被挂载到 body 下，容易误以为要手动 remove()。其实仍应走 Vue 生命周期：
- 用
-
isOpen设为false时，Modal实例会正常卸载，teleport内部也会清空目标容器内容 - 不需要、也不应该在
unmounted钩子里再调用document.body.removeChild(...)
如果发现 teleport 目标节点残留 DOM，大概率是 v-if 条件没及时更新，或组件内部有 keep-alive 干扰了卸载流程。
核心就一条：Vue 组件的销毁权在响应式状态手里，不在 DOM 节点手里。任何绕过 v-if 或 :is 的“手动清理”，本质上都是在对抗框架的设计契约。
