一、主应用生命周期

子应用有生命周期，同样的主应用也存在相应的生命周期，主应用的生命周期，怎么设计与处理，首先考虑的是：生命周期对于主应用来说存在什么意义，是不是针对子应用是否开始加载、 是否渲染完成、是否卸载完成。

与之对应的三个生命周期函数：

1. beforeLoad
2. mounted
3. destroyed

主要实现逻辑：在注册子应用的时候，通过传参的方式，缓存在微前端的框架里。

• 新建 main/micro/constant/mainLifeCycle.js 存储生命周期

  let mainLifeCycle = {}
  
  export const getMainLifeCycle = () => mainLifeCycle
  
  export const setMainLifeCycle = data => mainLifeCycle = data

• 在 main/src/utils/index.js 中 registerApp方法中 registerMicroApps 添加如下形参

  export const registerApp = (list) => {
    // 注册到微前端框架里
    registerMicroApps(list, {
      beforeLoad: [
        () => {
          console.log('开始加载')
        }
      ],
      mounted: [
        () => {
          console.log('渲染完成')
        }
      ],
      destroyed: [
        () => {
          console.log('卸载完成')
        }
      ]
    })
    ...
  }

• 改造 main/micro/start.js 中 registerMicroApps 方法

  export const registerMicroApps = (appList, lifeCycle) => {
    // 保存子应用列表
    setList(appList)
    // 在此执行主应用的生命周期函数
    lifeCycle.beforeLoad[0]()
    // 保存生命周期函数
    setMainLifeCycle(lifeCycle)
  }