vue组件循环引用（如a→b→a）虽不报错，但阻断销毁流程导致内存泄漏；应通过调度组件解耦、主动清理资源、避免闭包引用等方式解决。
Vue 组件通信中出现循环引用（比如 A → B → A），本身不直接报错，但会阻断组件实例的正常销毁流程，导致响应式数据、事件监听器、定时器等残留，最终引发内存泄漏。关键不在“通信方式”，而在于引用链让 GC 无法回收整个闭环对象图。
识别循环引用泄漏的典型表现
组件反复打开关闭后，内存占用持续上升（Chrome DevTools → Memory → 拍摄堆快照对比）；控制台无报错；组件内 watch、onMounted 逻辑重复执行；使用 defineAsyncComponent 异步加载时更易触发（因模块缓存 + 依赖闭环）。
用中间容器解耦双向依赖
不推荐让 A 直接 import B、B 又 import A。应引入一个第三方“调度组件”统一管理，切断原始引用链：
wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support
下载
基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。
- 新建 ModalRouter.vue 或 PanelManager.vue，只负责按需加载和挂载，不持有业务逻辑
- 所有被调用组件（A、B）改为异步定义：defineAsyncComponent(() => import('./A.vue'))
- 调度组件暴露 open(type, data) 方法，父组件只引用它，不再直接 import A/B
- 组件内部如需互相跳转，统一通过 emits('open-panel', { type: 'B', data }) 通知调度器，不直接调用对方
通信层主动切断引用
若必须使用 provide/inject、mitt、pinia 等方式通信，要防止注入对象形成闭包引用：
- 避免在 provide 中传入包含 this 或组件实例的对象（如 { vm: this }）
- inject 获取的方法，如需绑定到事件或回调，用 unref 或 toRaw 脱离响应式包装，防止 proxy 链滞留
- 使用 mitt 时，接收方在 onBeforeUnmount 中显式 off 对应事件，不要依赖自动清理
- Pinia store 中避免在 action 里长期持有组件局部变量或 ref，尤其带 watch 的响应式对象
强制卸载与资源归零
即使结构解耦，仍需在组件退出时做兜底清理：
- 在 onBeforeUnmount 中手动清除：定时器、addEventListener、ResizeObserver、IntersectionObserver
- 对通过 ref() 持有的 DOM 元素，在卸载前设为 null，避免 DOM 节点被意外保留
- 若组件内使用了第三方 UI 库（如 Choices.js、Flatpickr），务必调用其 destroy() 方法，不能只靠 v-if 移除 DOM
- 异步组件加载后，如需提前释放，可设 currentComponent.value = null 并触发 nextTick，再清空 shallowRef
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
