深圳市年检在哪个网站做,做类似淘宝的网站需多少资金,大名企业做网站推广,智能模板网站建设费用[qiankun]-多页签缓存环境功能需求多页签缓存方案方案1.主服务进行html替换方案2.微服务vnode 替换方案3.每个微服务都不卸载微服务加载方式的选择微服务的路由路径选择微服务的缓存工具微服务的容器使用tab作为微服务的挂载容器使用微服务路由作为微服务的挂载容器场景描述微服…
[qiankun]-多页签缓存环境功能需求多页签缓存方案方案1.主服务进行html替换方案2.微服务vnode 替换方案3.每个微服务都不卸载微服务加载方式的选择微服务的路由路径选择微服务的缓存工具微服务的容器使用tab作为微服务的挂载容器使用微服务路由作为微服务的挂载容器场景描述微服务的缓存缓存微服务删除微服务不同路由同一微服务情况管理系统比较常用的一个功能就时多页签的缓存我们通过缓存已经打开的页签并在切换页签的时候看到之前的查询结果在关闭页签的重新点击菜单那时看到的是新的没有查询记录界面
环境
语言采用的主流的vue3.xts开发 UI框架使用的是ant-design框架 其它工具使用了微服务技术-qiankun 缓存工具keep-alive
功能需求 通过点击菜单打开一个菜单页签(点击后展示的菜单称之为页签) 如果点击菜单之前已打开页签中没有该菜单则该页面应该是初始页面状态 如果点击菜单之前已打开页签中有该菜单则该页面应该是上次操作后状态 切换已打开的页签 则页面应该都是上次操作后状态 关闭页签后再次点击菜单 因为点击菜单之前关闭页签所以已打开页签中没有该菜单则该页面应该是初始页面状态
多页签缓存方案
方案1.主服务进行html替换
通过存储每个微服务容器的html内容然后在切回当前页签的时候微服务容器使用缓存的html替换也就是所谓的替换innerHTML。
方案尝试结果描述 替换的内容使得切换回原有页面确实是上次的查询结果页面但是页面失去了响应性变成了静态的HTML页面包括下拉框都没有了
方案2.微服务vnode 替换
通过存储每个微服务容器的 vnode 内容然后在切回当前页签的时候创建微服务实例的时候使用vnode替换掉原有的render渲染函数
方案尝试结果描述 因为本人使用的vue3开发使用render渲染函数是vue2创建vue实例的方法因此该方案无法实现使用vnode替换掉原有的render渲染函数
尝试了vnode的缓存强制替换的可能性vue3提示_vnode是只读属性不可以设置
方案3.每个微服务都不卸载
以上两个方案都是基于同时只加载一个微服务并且在切换的时候卸载当前微服务之所以先尝试前两个方案也是因为如果页面每个微服务都不卸载当打开的页签过多时会有性能问题因为微服务总数量暂时有限该问题此时先不考虑了如果之后有需要会另外总结
因为前两个方案都不可行只能尝试该方案方案描述
微服务加载方式的选择
qiankun加载加载微服务的方式有两种
是注册加载通过劫持路由会根据路由变化加载每个微服务 registerMicroApps是根据路由的变化加载微服务的只要路由变化就会触发微服务重新加载微服务因此无法阻止微服务的重新加载缓存不能被使用指定容器的内容会被覆盖因此感觉不适合缓存页签的方案是手动加载可以自己决定什么时候加载 loadMicroApp 是手动加载因此能决定是重新加载还是使用缓存感觉适合使用该方式
因此选择手动加载微服务的方式
微服务的路由路径选择
主服务具有公共页面例如404intro等路由页面公共页面与微服务都是展示在页面的主体区并且不需要缓存因为没有操作功能当然缓存也是可以的。微服务展示的时候公共路由页面不可展示路由也需要变为微服务的路由不能使用之前的路由路径。
因此可以使用router.push(),或者router.replace()改变浏览器的路由路径有说可以把路由router想象成一个访问记录的栈router.replace() 是替换掉栈顶而router.push() 则是向栈中再堆入一个新记录
考虑过所有微服务使用同一个路由路径但是因为浏览器的前进后退记录管理服务因此每个微服务的路由路径不能完全相同否则无法区分微服务的前进后退记录所以也不能使用replace方法了
因此每个微服务页面具有一个唯一的路由路径需要使用router.push记录所有的路由路径并且需要用来加载微服务的路由组件(如果没有找到指定的路由系统会跳转404因此需要微服务的路由组件微服务众多因此所有微服务可以采用相同的前缀用以匹配到同一个路由组件)一个微服务路由组件就能够满足需求 相同的前缀/micro/XXXX/XXXX例如/micro/service/function {path: /micro/:pathMatch(.*)*,///micro/:projectName/:pagemeta: { auth: true },component: () import(/* webpackChunkName: micro */ ../micro/index.vue)}微服务的缓存工具
默认情况下一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态 —— 当这个组件再一次被显示时会创建一个只带有初始状态的新实例。
keep-alive 是 vue 内置的动态组件缓存工具
keep-alive 缓存路由的key默认是每个路由的name一般的路由缓存因为每个路由设置了不同的name所以include包含需要缓存的路由的name即可
那么针对想更改缓存Key的情况
router-view v-slot{ Component, route }keep-alive :includecachePannelscomponent :iswrap(route, Component) :keywrapKey(route.path) //keep-alive
/router-view以下对component与key的处理PROJECT.cacheKey设置缓存的key字段
const wrap (route, component) {component.type.name path PROJECT.cacheKey ? route.path : store.state.pathMap[route.path].id;return component
};
const wrapKey (path) {if (path PROJECT.cacheKey) {return path} else {return store.state.pathMap[path].id}
}经过测试发现若缓存的字段是path则缓存成功若是key是改成id则缓存不成功因为对于源码的理解并不深入所以目前并不理解原因也暂时不做深入这里还是想吐槽一句看到在源码处这个问题已经被提出几年了但是都没有一个官方正式的回应都是小伙伴提供的各种解决方案而且就像上面说的绑定的key还必须是path其它不可以。。。
好吧暂时不纠结了既然path可用就确定使用path,以下是最终代码
router-view v-slot{ Component, route }keep-alive :includecachePannelscomponent :iswrap(route, Component) :keyroute.path //keep-alive
/router-viewconst wrap (route, component) {component.type.name route.path;return component
};因为微服务使用的是同一个路由组件因此name相同那么正好需要使用根据key进行缓存的功能
基于上述原因使用keep-alive缓存,路由path,作为缓存的key。
关于keep-alive重写的功能以后有机会在尝试吧
微服务的容器
一开始我是倾向于直接用微服务路由组件作为加载微服务的容器
但是使用路由的path作为路由缓存的key理论讲一旦path发生变更则路由组件会被销毁重新加载但是微服务切换时到底组件是否会被销毁在尝试时存在一些无可避免的问题当时没有成功
使用tab作为微服务的挂载容器
这里先讲述一个成功缓存的方式
template
a-tabs v-model:activeKeyactiveKeytabClickclickTab editcloseTaba-tab-pane v-foritem in cacheList :keyitem.id :tabitem.titlediv :idmicroitem.id classmicro-tab/div/a-tab-pane
/a-tabrouter-view v-slot{ Component, route }keep-alive :includecachePannelscomponent :iswrap(route, Component) :keyroute.path //keep-alive
/router-view
/template微服务路由 micro.vue
template
/template
script langts setup
import { useStore } from store;
const store useStore();
store.commit(loadMicroApp);
/script注意虽然微服务加载是在tab中挂载的但是router-view此时是要正常加载微服务路由的因为路径要有对应的匹配路由但是微服务又不在其中挂载所以隐藏微服务路由 micro.vue 的展示即可 使用微服务路由作为微服务的挂载容器
加载的时候,因为使用的path作为key理论来讲keep-alive应该将每个微服务作为一个单独的路由进行缓存.
但是实际情况有所不同现象描述
在打开页签的过程中每次都是onMount了的切换的时候可以看到确实缓存了微服务每次切换的时候显示的是缓存页面
但是在关闭页签的时候出现了问题一旦关闭了其中一个正在展示的微服务其它微服务页面就白屏了就像是其它路由组件都被删除了所以为什么作为单独路由缓存的其它页面没有正常展示但是如果关闭的是没有展示的页签则并不影响当前路由的展示与后续的切换
因为该问题没有解决所以最终没有采用该方式下面采用路由组件作为容器时的现象
场景描述
主服务首次点击菜单A打开页签A挂载A服务 onMounted onActivated
主服务首次点击菜单B打开页签B挂载B服务 onMounted onActivated
切换A服务B onDeactivated,A onActivated
切换B服务A onDeactivated,B onActivated
此时关闭B服务
实际B onUnmountedA onMounted onActivated
理论B onUnmountedA onActivated
这就像是A挂载到了B的路由组件上了 正常的切换时keep-alive缓存的组件 vue 的组件不同路径同一个路由, 缓存的组件为同一个 因此同组件路由卸载的时候另外的就无法展示了原因找到了但是如何区分开?尝试过使用cloneVnode 克隆micro.vue组件但是无效所以暂时未找到解决方案
微服务的缓存
缓存微服务
需要缓存的微服务正常手动加载微服务即可并缓存该微服务
最早的时候是直接缓存的
cacheMap[microApp.path] loadMicroApp(microApp)后来在实践中发现直接缓存是存在问题的例如当loadMicroApp失败的时候(微服务不存在不可用的情况)此时缓存的微服务实例是不存在的自然对于该微服务实例后续的卸载会导致报错
因此当缓存微服务的时候需要确保微服务加载成功
const appMicro loadMicroApp(microApp, { singular: false }, microLifeCycle);
appMicro.mountPromise.then((res) {//微服务加载成功时保存微服务state.micro.cacheMap[microApp.path] appMicro;
}).catch((error) {//微服务加载失败时提示错误console.error(mountPromise error, error)
})
microLifeCycle是微服务的生命周期可以在其中设置微服务的加载动画
删除微服务
关闭页签也就是删除缓存微服务时注意一定要先卸载微服务unmount否则下次加载该微服务时会报已挂载错误
//卸载微服务
cacheMap[microApp.path].unmount();
//删除微服务实例
delete cacheMap[microApp.path]不同路由同一微服务情况
如果微服务有两个路由而两个路由页面都点击后要缓存此时也是正常加载即可当作两个不同微服务加载即可也不会报已挂载错误因为路径不同可以当作缓存的是两个微服务(不同于在micro.vue中挂载该路由组件中如果当作两个微服务挂载是会报已挂载错误的)因为是加载在tab中彼此并不互相影响
