深入了解 qiankun 框架的核心概念

原创于 2025-11-28 17:20:43 发布 · 449 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #qiankun

vue 专栏收录该内容

78 篇文章

订阅专栏

深入了解 qiankun 框架的核心概念，这是掌握微前端架构的基础。下面我会从定义、原理和作用等方面，详细拆解 qiankun 的核心概念。

一、主应用（基座应用 / Base App）

核心概念（What）

主应用是微前端架构的 “容器”，负责管理所有微应用的加载、卸载、路由匹配和全局状态协调，是整个系统的入口和中枢。

工作原理（How）

主应用通过 qiankun 提供的 API（如 registerMicroApps、start）注册微应用，定义微应用的激活规则、挂载容器等。
主应用自身拥有独立的路由、状态和 UI，微应用则挂载到主应用指定的 DOM 节点中。
主应用可以控制微应用的生命周期（启动、挂载、卸载），并作为全局通信的中转站。

使用场景（When & Where）

作为整个系统的统一入口，提供全局导航、用户登录、权限控制等公共能力。
例如：企业中台系统的主框架，包含侧边栏导航、顶部用户信息，点击导航后加载不同业务线的微应用。

二、微应用（Micro App）

核心概念（What）

微应用是独立开发、独立部署的子应用，可以是不同技术栈（Vue/React/Angular）的项目，被主应用按需加载和运行。

工作原理（How）

微应用需要暴露 bootstrap（启动）、mount（挂载）、unmount（卸载）三个生命周期钩子，供主应用调用。
微应用运行在主应用的沙箱环境中（可选），避免与主应用或其他微应用产生冲突。
微应用可通过主应用传递的 props 获取全局数据，或通过通信机制与主应用 / 其他微应用交互。

使用场景（When & Where）

对应具体的业务模块，如 “订单管理”“用户中心”“数据分析” 等独立功能模块。
每个微应用可由不同团队维护，技术栈可灵活选择（比如订单用 Vue2，数据分析用 React）。

三、生命周期（Lifecycle）

核心概念（What）

qiankun 为微应用定义了标准化的生命周期，确保主应用能精准控制微应用的加载、运行和销毁流程。

工作原理（How）

qiankun 规定的微应用生命周期钩子包括：

bootstrap：微应用初始化（仅在第一次加载时执行一次），可用于初始化全局资源（如全局组件、工具函数）。
mount：微应用挂载到主应用（每次激活微应用时执行），核心逻辑是渲染应用到指定容器。
unmount：微应用从主应用卸载（切换微应用或路由时执行），需清理副作用（如事件监听、定时器）。
update（可选）：微应用接收主应用更新的 props 时触发（如全局状态变化）。

使用场景（When & Where）

bootstrap：初始化微应用的请求拦截器、全局样式等。
mount：渲染微应用实例到 DOM 节点，初始化路由。
unmount：销毁 Vue/React 实例、清除路由监听，防止内存泄漏。

四、沙箱机制（Sandbox）

核心概念（What）

沙箱是 qiankun 提供的隔离机制，用于避免微应用之间、微应用与主应用之间的全局变量污染、样式冲突和 DOM 冲突。

工作原理（How）

qiankun 提供两种沙箱模式：

JavaScript 沙箱：
- 快照沙箱：适用于单实例场景，记录微应用挂载前的全局变量快照，卸载时恢复快照。
- 代理沙箱：适用于多实例场景，通过 Proxy 代理 window 对象，微应用对全局变量的修改仅作用于代理对象，不影响真实 window。
样式沙箱：
- 严格样式隔离（strictStyleIsolation: true）：为微应用的 DOM 容器添加 Shadow DOM，实现样式完全隔离。
- CSS 前缀隔离（experimentalStyleIsolation: true）：自动为微应用的样式添加唯一前缀，避免样式冲突。

使用场景（When & Where）

多微应用共存时，防止某微应用修改 window.$ 导致其他应用的 jQuery 失效。
避免微应用的 .container 样式覆盖主应用的同名样式。

五、应用通信（Communication）

核心概念（What）

应用通信是主应用与微应用、微应用之间数据交互的机制，qiankun 提供了多种通信方案。

工作原理（How）

Props 传递：主应用注册微应用时，通过 props 向微应用传递初始化数据（如用户信息、全局配置）。
全局状态管理：
- 基于发布 - 订阅模式：主应用提供全局 EventBus，微应用通过 props 获取 Bus 实例，实现事件订阅 / 发布。
- 基于状态库：如使用 Vuex/Pinia/Redux 作为全局状态池，主应用维护状态，微应用通过接口读写状态。
URL 参数：简单数据可通过 URL 传递（如微应用路由携带参数）。

使用场景（When & Where）

主应用将登录后的 token 通过 props 传递给所有微应用。
微应用 A 的操作触发全局状态更新，微应用 B 监听状态变化并刷新 UI。

六、路由管理（Route Management）

核心概念（What）

路由管理是主应用与微应用之间的路由协调机制，确保 URL 路径能正确匹配到对应的微应用或微应用内的页面。

工作原理（How）

激活规则（activeRule）：主应用为每个微应用定义激活规则（如 /vue2-app），当 URL 匹配该规则时，自动加载并挂载对应的微应用。
微应用路由适配：
- 微应用需设置路由 base（如 Vue 的 router.base = '/vue2-app'），确保路由跳转基于激活规则路径。
- 微应用建议使用 history 模式，避免 hash 模式与主应用路由冲突。
主应用路由兜底：主应用需添加占位路由（如 /vue2-app/*），防止主应用路由拦截微应用路径。