移动端微应用中用vue动态组件挂载子页面的核心是“按需加载+条件挂载+生命周期可控”，需约定挂载点、延迟挂载、异步组件加载、粒度缓存及与宿主的路由通信和生命周期协同。
在移动端微应用中用 Vue 动态组件挂载不同业务子页面，核心是“按需加载 + 条件挂载 + 生命周期可控”。不是简单切换组件名，而是要兼顾资源隔离、状态保留、路由联动和轻量启动。
明确挂载点与入口控制
微应用通常运行在宿主容器（如壳App或主站 WebView）中，不能直接操作 #app。需约定统一挂载点（如 div#micro-app-container），并在初始化时检查该节点是否存在，不存在则动态创建并插入 body 底部。
- 避免硬编码 ID，建议通过配置项传入挂载选择器（如
mountSelector: '#order-page'） - 挂载前清空旧内容但保留 DOM 节点，防止重复 mount 报错
- 支持延迟挂载：宿主可通过 postMessage 发送
MOUNT_ORDER_PAGE指令触发挂载
用 <component :is></component> + 异步组件实现按需加载
子页面不应提前全部 import，而应配合 webpack 或 Vite 的 dynamic import 实现懒加载。Vue 会自动将返回的 Promise 解析为异步组件。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 定义映射表：
const pageMap = { order: () => import('./pages/OrderPage.vue'), pay: () => import('./pages/PayPage.vue') } - 模板中：
<component :is="currentPage"></component>，其中currentPage是 Promise 组件或已解析的组件对象 - 配合
<suspense></suspense>（Vue 3）显示 loading 状态，避免白屏
用 <keep-alive></keep-alive> 缓存活跃页，但限制缓存粒度
移动端内存敏感，不能无差别缓存所有子页。应结合业务逻辑控制哪些页需要保活（如订单填写页），哪些页每次重新渲染（如营销活动页）。
- 给
<keep-alive></keep-alive>加include白名单：<keep-alive :include="['OrderPage', 'AddressPage']> - 利用
activated/deactivated钩子同步页面可见状态，暂停定时器、断开 WebSocket 等 - 对非缓存页，可在
beforeUnmount中手动清理 localStorage 临时数据
与宿主协同：路由、通信、生命周期对齐
微应用不独立管理 URL，需响应宿主下发的路由参数，并上报自身状态。
- 监听宿主 postMessage：
window.addEventListener('message', e => { if (e.data.path === '/pay') setCurrentPage('pay') }) - 主动上报：
window.parent.postMessage({ type: 'PAGE_READY', page: 'order' }, '*') - 挂载后调用宿主 SDK 初始化（如埋点、支付 SDK），卸载前调用 cleanup 方法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
