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