Vue 动态组件如何在移动端微应用中动态挂载不同的业务子页面

移动端微应用中用Vue动态组件挂载子页面的核心是“按需加载+条件挂载+生命周期可控”，需约定挂载点、延迟挂载、异步组件加载、<keep-alive>粒度缓存及与宿主的路由通信和生命周期协同。

在移动端微应用中用 Vue 动态组件挂载不同业务子页面，核心是“按需加载 + 条件挂载 + 生命周期可控”。不是简单切换组件名，而是要兼顾资源隔离、状态保留、路由联动和轻量启动。

明确挂载点与入口控制

微应用通常运行在宿主容器（如壳App或主站 WebView）中，不能直接操作 #app。需约定统一挂载点（如 div#micro-app-container），并在初始化时检查该节点是否存在，不存在则动态创建并插入 body 底部。

1. 避免硬编码 ID，建议通过配置项传入挂载选择器（如 mountSelector: '#order-page'）
2. 挂载前清空旧内容但保留 DOM 节点，防止重复 mount 报错
3. 支持延迟挂载：宿主可通过 postMessage 发送 MOUNT_ORDER_PAGE 指令触发挂载

用 <component :is> + 异步组件实现按需加载

子页面不应提前全部 import，而应配合 webpack 或 Vite 的 dynamic import 实现懒加载。Vue 会自动将返回的 Promise 解析为异步组件。

1. 定义映射表：const pageMap = { order: () => import('./pages/OrderPage.vue'), pay: () => import('./pages/PayPage.vue') }
2. 模板中：<component :is="currentPage" />，其中 currentPage 是 Promise 组件或已解析的组件对象
3. 配合 <Suspense>（Vue 3）显示 loading 状态，避免白屏

用 <keep-alive> 缓存活跃页，但限制缓存粒度

移动端内存敏感，不能无差别缓存所有子页。应结合业务逻辑控制哪些页需要保活（如订单填写页），哪些页每次重新渲染（如营销活动页）。

1. 给 <keep-alive> 加 include 白名单：<keep-alive :include="['OrderPage', 'AddressPage']>
2. 利用 activated/deactivated 钩子同步页面可见状态，暂停定时器、断开 WebSocket 等
3. 对非缓存页，可在 beforeUnmount 中手动清理 localStorage 临时数据

与宿主协同：路由、通信、生命周期对齐

微应用不独立管理 URL，需响应宿主下发的路由参数，并上报自身状态。

1. 监听宿主 postMessage：window.addEventListener('message', e => { if (e.data.path === '/pay') setCurrentPage('pay') })
2. 主动上报：window.parent.postMessage({ type: 'PAGE_READY', page: 'order' }, '*')
3. 挂载后调用宿主 SDK 初始化（如埋点、支付 SDK），卸载前调用 cleanup 方法