异步组件在弹窗场景的核心价值是“点开才加载”，即延迟组件定义、资源加载和实例创建至用户点击时，显著降低首屏体积与初始渲染压力；需用 defineAsyncComponent 包裹、配合 v-if 控制挂载、支持预加载与错误兜底。
异步组件在弹窗场景下的核心价值，是把模态框的组件定义、资源加载、实例创建全部延迟到用户真正点击触发时才执行——不是等页面加载完就拉取所有弹窗代码，而是“点开才加载”，从而显著降低首屏体积和初始渲染压力。
用 defineAsyncComponent 包裹弹窗组件
Vue 3 推荐使用 defineAsyncComponent 创建异步组件，配合 Suspense（可选）处理加载状态。关键点在于：只在需要时才 import，且不提前实例化。
- 不要在 setup 或 data 中直接 import 弹窗组件（那会变成同步加载）
- 改用函数式 import，例如：() => import('./components/ComplexFormDialog.vue')
- 推荐加上 loading 和 error 状态提示，避免白屏或报错中断流程
结合 v-if 控制挂载时机，而非 v-show
v-show 只是切 display，组件仍会渲染并执行 setup；而 v-if 是条件性地创建/销毁组件实例。对异步弹窗来说，必须搭配 v-if 使用，才能确保：
- 组件未打开时不执行 setup、不请求接口、不初始化表单数据
- 关闭后自动卸载，释放内存和副作用（如未清除的 watch、定时器）
- 每次打开都是全新实例，避免状态残留（尤其多处复用同一弹窗时）
进阶：预加载 + 缓存策略提升体验
如果弹窗打开频率高（比如编辑按钮反复点击），可以考虑「用户 hover 时预加载」或「首次打开后缓存组件工厂」：
- hover 按钮时调用 load() 方法（defineAsyncComponent 返回的对象有该方法），提前拉取 JS chunk
- 首次成功加载后，把组件工厂缓存到变量中，后续直接复用，避免重复 import
- 注意：缓存的是组件定义，不是实例；每个 v-if 打开仍是新实例，安全可靠
别忘了错误边界和兜底逻辑
网络波动或构建异常可能导致异步组件加载失败。建议：
- 在 defineAsyncComponent 配置 error 选项，返回一个轻量错误提示组件
- 外层加 try-catch 处理 setup 报错（比如 API 响应结构变更）
- 关闭按钮逻辑要独立于弹窗内部状态，确保即使组件加载失败也能关掉遮罩层
不复杂但容易忽略：异步组件 + v-if + 预加载，三者组合就能让一个含图表、富文本、多级联动的选择器的弹窗，从 2s 延迟降到点击即响应。重点不在“怎么写”，而在“什么时候不加载”。
