Vue 3 动态组件循环引用（如 A→B→A）不报错但阻断销毁链路，导致内存泄漏；需用 defineAsyncComponent 异步加载、引入调度组件解耦双向依赖，并在 onBeforeUnmount 中手动清理定时器、事件监听器及第三方库实例。

Vue 3 中动态组件循环引用（如 A → B → A）本身不会直接报错，但会阻断组件销毁链路，使响应式系统、事件监听器、定时器等无法被垃圾回收，长期积累就会引发内存溢出（OOM），尤其在频繁切换、异步加载场景下更明显。

核心思路不是“怎么注册”，而是“怎么切断引用闭环”。Vue 的 component 标签 + is 动态绑定只是触发点，真正泄漏根源在于模块级 import 依赖和实例间强引用。

---

使用 defineAsyncComponent 异步加载，隔离模块依赖

同步 import 会让 A 和 B 在编译期就互相持有模块引用，GC 无法释放整个闭环。改用异步方式可借助模块缓存机制+运行时按需加载，天然打破静态依赖。

• 所有被动态挂载的组件（A.vue、B.vue）都必须定义为异步组件：

  // 不要这样（同步引用 → 循环依赖）
  import ComponentA from './A.vue'
  import ComponentB from './B.vue'
  
  // 要这样（异步定义 → 模块不立即执行）
  const ComponentA = defineAsyncComponent(() => import('./A.vue'))
  const ComponentB = defineAsyncComponent(() => import('./B.vue'))

• 父组件或调度器只声明 components: { ComponentA, ComponentB }，不提前实例化

• 动态组件 渲染时才加载对应模块，卸载后模块可被 Vite/HMR 正确清理

---

引入调度组件（PanelRouter / ModalManager），消除双向 import

让 A 和 B 完全不知道彼此存在，所有跳转由第三方统一协调：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 新建 PanelRouter.vue，仅负责：
  • 接收 open({ type: 'B', data }) 事件
  • 内部用 defineAsyncComponent 加载目标组件
  • 通过 v-if 控制显示/销毁（确保组件真实卸载）
• A.vue 和 B.vue 都不 import 对方，只 emit 通知：

  // A.vue 内部需要打开 B 时
  $emit('open-panel', { type: 'B', data: { id: 123 } })

• 父组件或布局页只 import 并使用 PanelRouter，不再直引 A/B

这样 A ↔ B 的引用链变为：A → PanelRouter ← B，闭环被打破。

---

动态组件卸载时强制清理资源

即使用了异步加载，若组件内部持有未释放资源，仍会泄漏：

• 在 onBeforeUnmount 中必须手动处理：

  • 清除 setInterval / setTimeout
  • 移除 window.addEventListener、ResizeObserver、IntersectionObserver
  • 调用第三方库的 destroy() 方法（如 Flatpickr.destroy()）
  • 将 ref() 持有的 DOM 元素设为 null

• 若使用 provide/inject 传函数，避免闭包捕获 this 或响应式对象：

  // ❌ 危险：inject 后的方法内部 this 指向原组件，形成引用
  provide('openB', () => { /* this.xxx */ })
  
  // ✅ 安全：用 toRaw + unref 脱离响应式包装，或只传纯函数
  provide('openB', (data) => {
    router.push({ name: 'PanelB', params: data })
  })

---

配合构建与运行时优化防 OOM

内存溢出有时是编译阶段堆溢出（如 Vite 解析超大 JS 文件），非运行时泄漏：

• 检查是否误将 crypto-js.min.js 等大型压缩脚本放入 src/ 直接 import —— 应改用 npm install crypto-js + 按需引入
• 在 vue.config.js（如用 Vue CLI）或 vite.config.ts 中调大 Node 堆内存（临时缓解）：

  node --max-old-space-size=4096 ./node_modules/.bin/vite build

• 但根本解法仍是精简依赖、拆分大组件、避免深层嵌套 provide/inject

不复杂但容易忽略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！