在前端微前端架构中，Qiankun 是常用的微前端框架。它允许主应用动态加载多个子应用，而子应用必须遵循特定生命周期，保证能够被正确加载、挂载和卸载。本文将详细解析 子应用的三个核心生命周期函数：bootstrap、mount、unmount，并说明它们的使用场景，同时给出具体示例。
1. 子应用生命周期概览
子应用生命周期分为三个阶段：
- Bootstrap（初始化阶段）
- Mount（挂载阶段）
- Unmount（卸载阶段）
每个阶段有明确的调用时机和职责。
2. bootstrap：初始化阶段
作用：子应用首次加载时执行，用于全局初始化。
使用场景：
- 初始化全局状态管理（如 Vuex、Pinia、Redux 等）
- 注册全局组件或插件
- 配置全局库或样式（Axios、ECharts 等）
示例：
1export async function bootstrap(props) { 2 console.log('子应用初始化 bootstrap', props) 3 // 初始化全局库或状态 4} 5
特点：
- 只在首次加载执行一次
- 不依赖 DOM 渲染
3. mount：挂载阶段
作用：每次子应用激活时执行，用于渲染界面和启动业务逻辑。
使用场景：
- 渲染子应用界面
- 启动内部业务逻辑
- 根据主应用传入的 props 更新状态或权限
示例：
1import { createApp } from 'vue' 2import App from './App.vue' 3 4let app = null 5 6export async function mount(props) { 7 console.log('子应用挂载 mount', props) 8 const { container } = props 9 app = createApp(App) 10 app.mount(container ? container.querySelector('#app') : '#app') 11} 12
特点：
- 每次子应用被激活时调用
- 注意幂等性，避免重复注册事件或定时器
4. unmount：卸载阶段
作用：每次子应用离开时执行，用于释放资源。
使用场景：
- 卸载应用实例
- 清理定时器、事件监听、WebSocket 等
- 清理 DOM 或缓存，防止内存泄漏
示例：
1export async function unmount(props) { 2 console.log('子应用卸载 unmount', props) 3 app.unmount() 4 app = null 5} 6
特点：
- 每次子应用离开时调用
- 必须彻底清理资源
5. 生命周期总结表
| 生命周期 | 调用次数 | 典型操作 | 注意点 |
|---|---|---|---|
| bootstrap | 首次加载一次 | 全局初始化、注册库、状态 | 不操作 DOM |
| mount | 每次激活调用 | DOM 渲染、业务逻辑启动、处理 props | 可能多次调用，需要幂等性 |
| unmount | 每次切出调用 | 卸载应用、清理资源 | 必须清理，否则内存泄漏 |
6. 总结
在 Qiankun 微前端架构中，子应用生命周期函数保证应用能够被正确加载、挂载和卸载：
- bootstrap：初始化全局资源，只执行一次
- mount：渲染界面并启动业务逻辑，每次激活执行
- unmount：卸载和清理资源，每次离开执行
合理使用生命周期函数，可以保证微前端系统稳定、高效，同时避免内存泄漏、重复渲染或事件残留。
本文部分内容借助 AI 辅助生成，并由作者整理审核。
《Qiankun 子应用生命周期及使用场景解析》 是转载文章，点击查看原文。
