基于微前端qiankun的多页签缓存方案实践

// 传入`vue-keep-alive`的自定义方法function updateComponentsKey(key, name, vnode) {  const match = this.$route.matched[1];
  if (match && match.meta.multiNodeKey) {    vnode.key = match.meta.multiNodeKey(key, this.$route);    return vnode.key;  }
  return key;}

<template>  <div id="app">  <header>    <router-link to="/app-vue-hash/">app-vue-hash</router-link>    <router-link to="/app-vue-history/">app-vue-history</router-link>    <router-link to="/about">about</router-link>  </header>  <div id="appContainer1" v-show="$route.path.startsWith('/app-vue-hash/')"></div>  <div id="appContainer2" v-show="$route.path.startsWith('/app-vue-history/')"></div>  <router-view></router-view></div></template>
<script>import { loadMicroApp } from 'qiankun';
const apps = [{  name: 'app-vue-hash',  entry: 'http://localhost:1111',  container: '#appContainer1',  props: { data : { store, router } }},{  name: 'app-vue-history',  entry: 'http://localhost:2222',  container: '#appContainer2',  props: { data : store }}]
export default {  mounted() {    // 优先加载当前的子项目    const path = this.$route.path;    const currentAppIndex = apps.findIndex(item => path.includes(item.name));    if(currentAppIndex !== -1){      const currApp = apps.splice(currentAppIndex, 1)[0];      apps.unshift(currApp);    }    // loadMicroApp 返回值是 app 的生命周期函数数组    const loadApps = apps.map(item => loadMicroApp(item))    // 当 tab 页关闭时，调用 loadApps 中 app 的 unmount 函数即可  },}</script>

// keep-alive核心代码render () {  const slot = this.$slots.default  const vnode: VNode = getFirstComponentChild(slot)  const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions  if (componentOptions) {    // 更多代码...    // 缓存命中    if (cache[key]) {      vnode.componentInstance = cache[key].componentInstance      // make current key freshest      remove(keys, key)      keys.push(key)    } else {      // delay setting the cache until update      this.vnodeToCache = vnode      this.keyToCache = key    }    // 设置keep-alive，防止再次触发created等生命周期    vnode.data.keepAlive = true  }  return vnode || (slot && slot[0])}// mounted和updated时缓存当前组件的vnodemounted() {  this.cacheVNode()}updated() {  this.cacheVNode()}

// 父应用提供unmountCache方法function unmountCache() {  // 此处永远只会保存首次加载生成的实例  const needCached = this.instance?.cachedInstance || this.instance;  const cachedInstance = {};  cachedInstance._vnode = needCached._vnode;  // keepalive设置为必须 防止进入时再次created，同keep-alive实现  if (!cachedInstance._vnode.data.keepAlive) cachedInstance._vnode.data.keepAlive = true;  // 省略其他代码...
  // loadedApplicationMap用于是key-value形式，用于保存当前应用的实例  loadedApplicationMap[this.cacheKey] = cachedInstance;  // 省略其他代码...
  // 卸载实例  this.instance.$destroy();  // 设置为null后可进行垃圾回收  this.instance = null;}
// 子应用在qiankun框架提供的卸载方法中，调用unmountCacheexport async function unmount() {  console.log('[vue] system app unmount');  mainService.unmountCache();}

// 创建子应用实例，有缓存的vnode则使用缓存的vnodefunction newVueInstance(cachedNode) {  const config = {    router: this.router,    store: this.store,    render: cachedNode ? () => cachedNode : instance.render, // 优先使用缓存vnode  });  return new Vue(config);}
// 实例化子应用实例，根据是否有缓存vnode确定是否传入cachedNodethis.instance = newVueInstance(cachedNode);this.instance.$mount('#app');

// 实例化子应用vue-routerfunction initRouter() {  const { router: originRouter } = this.baseConfig;  const config = Object.assign(originRouter, {    base: `app-kafka/`,  });  Vue.use(VueRouter);  this.router = new VueRouter(config);}
// 创建子应用实例，有缓存的vnode则使用缓存的vnodefunction newVueInstance(cachedNode) {  const config = {    router: this.router, // 在vue init过程中，会重新调用vue-router的init方法，重新启动对popstate事件监听    store: this.store,    render: cachedNode ? () => cachedNode : instance.render, // 优先使用缓存vnode  });  return new Vue(config);}
function render() {  if（isCache） {    // 场景一、重新进入应用（有缓存）    const cachedInstance = loadedApplicationMap[this.cacheKey];
    // router使用缓存命中    this.router = cachedInstance.$router;    // 让当前路由在最初的Vue实例上可用    this.router.apps = cachedInstance.catchRoute.apps;    // 使用缓存vnode重新实例化子应用    const cachedNode = cachedInstance._vnode;    this.instance = this.newVueInstance(cachedNode);  } else {    // 场景二、首次加载子应用/重新进入应用（无缓存）    this.initRouter();    // 正常实例化    this.instance = this.newVueInstance();  }}
function unmountCache() {  // 省略其他代码...  cachedInstance.$router = this.instance.$router;  cachedInstance.$router.app = null;  // 省略其他代码...}

// 自定义事件发布const evt = new CustomEvent('microServiceEvent', {  detail: {    action: { name: action, data },    basePath, // 用于子应用唯一标识  },});document.dispatchEvent(evt);
// 自定义事件监听document.addEventListener('microServiceEvent', this.listener);

// 子应用main.jslet mainService = null;
export async function mount(props) {  mainService = null;  const { MainService } = props;  // 注册主应用服务  mainService = new MainService({  // 传入对应参数  });  // 实例化vue并渲染  mainService.render(props);}export async function unmount() {  mainService.unmountCache();}