问题概述:
当在组件中使用kepp-alive时,keep-alive中如果有其他的缓存页面,会导致从其他页
面跳转至缓存页面时造成页面数据紊乱,渲染紊乱的问题,(主要出现在echarts图表样式上)
问题触发或复显条件:
- 多个页面被keep-alive缓存
- 被keep-alive缓存的组件都具有对$route的监听,或者其他对于全局状态量变化的监听
问题解决方案思考:
当页面跳转到A页面的时候,A页面$route监听事件被触发,B页面由于被keep-alive缓存导致$route监听事件被触发,然后由于两个响应的时间的快慢,或者是接口响应时间的快慢,导致页面的数据更新快慢不同,所以导致的问题,那么考虑actived事件不能完全解决,因为$route的watch事件是先于actived触发导致了虽然最后触发都是正常的,但是会出现多次数据跳动的问题。
考虑到代码量过大,如果按照改动页面内的echarts图表的唯一标识id,则改动量太大,且容易出错,所以后则考虑是否能够在对于$route的监听事件内添加对路由路径的判断来避免这个因素
目前暂替的解决方案:
- 对于在vue2中使用$route的监听事件,需加上对于路由的判断,尤其为需要被keep-alive缓存的组件内部显得尤为重要
- 对于在多个被keep-alive缓存的页面内所需要的展示的图标应尽量采用不同命名
- 对于keep-alive组件的缓存应当慎用,只有当明确提出需求的时候再使用
未确认的问题
- 目前不确认vue3是否也具有该问题,watch与keep-alive组件冲突