vue基座的阿里 qiankun主、微应用的demo测试验证结论经过2周的阿里qiankun微前端框架学习，完成了部分d

经过2周的阿里qiankun微前端框架学习，完成了部分demo搭建（都没有美化demo界面）、测试验证工作。

文前备注：

本文vue项目皆以vue-cli 4.x脚手架搭建
本文仅为个人测试demo代码，非最优解
本人能力有限，不保证观点正确，仅做分享使用

一、搭建的demo：

搭建了 vue3.x+vue-router4.x + ts 主应用基座demo（qiankun 2.x）
1. vue3.x+vue-router4.x + ts 的微应用demo
2. vue3.x+vue-router3.x + ts 的微应用demo
3. vue2.x+vue-router3.x + ts 的微应用demo
搭建了 vue2.x+vue-router3.x + ts 主应用基座demo（qiankun 2.x）
1. vue2.x+vue-router3.x + ts 的微应用demo
2. vue3.x+vue-router4.x + ts 的微应用demo
3. react 17.x + react-router-dom6.x 的微应用demo

二、验证的目标：

主应用、微应用配置后是否能正常、独立运行
验证通过：都可以正常、独立运行
主应用能否正常加载已注册、已开启服务的微应用
验证通过
主应用如何加载已注册、未开启服务的微应用

主应用会抛出错误Failed to fetch
```
Uncaught TypeError: application 'son-app1' died in status LOADING_SOURCE_CODE: Failed to fetch
```
可以通过addGlobalUncaughtErrorHandler(error => {})添加全局的未捕获异常处理器处理错误，跳转404或使用其他处理方式。
主应用与微应用的路由配合是否稳定
1. 基座demo1：不稳定
  
  问题描述：先打开微应用容器页面app.page，再打开主应用页面test1.page,然后后退操作，微应用容器页面再次渲染失败，页面空白。
  
  具体原因：在处理主、微应用的交叉混合的前进后的后退操作时，出现了后退返回qiankun微应用容器页面，乾坤微应用hook错误调用的致命问题。
  
  问题备注：该问题已排除因mounted钩子可能无法获取element元素导致，nextTick与deepAlive等方案也排除。该问题在基座demo2上不存在。
2. 基座demo2：稳定
  
  基座demo1出现的一系列问题，在基座demo2上均未复现。
主应用与微应用的数据通信方式、成本
1. 单向通信：注册微应用时通过配置props可以给微应用传递初始化参数，微应用在钩子函数bootstrap(props)、mount(props)中通过props获取，该传递方式建议传递根实例等常量。
  
  结论：
  - 通信成本 ≈ 0
  - 仅能主应用向微应用传参。
2. 双向通信：通过initGlobalState(state:Record<string, any>):MicroAppStateActions注册乾坤全局状态（类似vuex的共享数据），主、微应用皆可通过MicroAppStateActions.onGlobalStateChange(callback,fireImmediately)来监听数据变化，通过MicroAppStateActions.setGlobalState({key:value})来改变数据。
```
interface State{
    token:string,
}
const state:State = {token:""};
const actions:MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state:State,prev:State)=>{
    // state: 变更后的状态; prev 变更前的状态
});
actions.setGlobalState({token:"一个匿名用户的token"})
```
  onGlobalStateChange(callback,fireImmediately)的fireImmediately设为true可以触发一次callback，可用于微应用初始化取值。
  
  setGlobalState执行后，所有主、微应用都会被分发一次onGlobalStateChange,注意对state.key限制调用条件===、!==谨慎调用setGlobalState。
  
  仅在使用setGlobalState后，onGlobalStateChange才会被触发，且onGlobalStateChange的回调callback(state,prevState)中state返回所有共享数据，开发时需要自行添加相应的判断避免重复赋值。
  
  结论：
  - 通信成本：根据微应用的数量x、共享的数据数量y上升。x、y越多，出错的可能越大,成本越高。

三、短期测试验证的结果：

排除了 vue3.x+vue-router4.x 为基座的选项
验证了 vuex2.x +vue-router3.x + qiankun 的基本功能，确定了使用qiankun微前端方案的可行性基础。