如何利用对象字面量在微前端架构中声明子应用微任务生命周期钩子-js教程-PHP中文网

微前端生命周期钩子需按框架约定键名（如qiankun的bootstrap/mount/unmount或wujie的beforemount/aftermount）挂载函数并导出，对象字面量仅为载体，非任意命名对象均有效。

如何利用对象字面量在微前端架构中声明子应用微任务生命周期钩子

对象字面量本身不能直接“声明”微前端的生命周期钩子，它只是 JavaScript 中定义键值对的一种语法形式。真正起作用的是将符合框架规范的函数，以特定键名（如 bootstrap、mount、unmount）挂载到一个普通对象上，再把这个对象导出供主应用识别和调用。

qiankun 子应用需导出标准生命周期对象

qiankun 要求子应用在入口文件（如 src/index.js 或 entry.js）中导出一个包含指定方法的对象。这不是任意命名，而是框架约定的契约：

bootstrap：仅首次加载时执行一次，适合初始化全局配置、缓存、第三方 SDK 等
mount：每次子应用被激活（路由进入）时调用，负责渲染真实 UI
unmount：每次子应用被切出（路由离开）时调用，必须清理 DOM、定时器、事件监听器等副作用
update（可选）：仅在使用 loadMicroApp 动态加载时触发，用于响应 props 变更

示例（React 子应用）：

export const lifeCycles = {
  bootstrap() {
    console.log('子应用已初始化');
    return Promise.resolve();
  },
  mount(props) {
    ReactDOM.render(, props.container.querySelector('#root'));
    return Promise.resolve();
  },
  unmount(props) {
    ReactDOM.unmountComponentAtNode(props.container.querySelector('#root'));
    return Promise.resolve();
  }
};

export default lifeCycles;

无界（wujie）子应用使用对象字面量注册钩子

无界框架同样依赖对象字面量结构，但钩子命名和语义更细化，且支持保活场景：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

beforeLoad：资源加载前，适合权限拦截或环境预设
beforeMount：DOM 挂载前，可操作容器节点或注入脚本
afterMount：挂载完成，适合发起接口请求、初始化状态
beforeUnmount：卸载前，必须清除所有副作用（如 setInterval、addEventListener）
activated 和 deactivated：仅在保活模式下生效，对应显隐切换

这些钩子需通过 wujie.init 或子应用配置对象传入，例如：

wujie.init({
  name: 'sub-react-app',
  url: '//localhost:8001/',
  el: '#subapp-container',
  props: { globalData: {} },
  lifeCycle: {
    beforeMount: () => console.log('即将挂载'),
    afterMount: () => fetch('/api/init').then(res => res.json()),
    beforeUnmount: () => clearInterval(timerId)
  }
});