记一次vue2中使用keep-alive时导致的页面图表、数据紊乱的问题

问题概述：

当在组件中使用kepp-alive时，keep-alive中如果有其他的缓存页面，会导致从其他页
面跳转至缓存页面时造成页面数据紊乱，渲染紊乱的问题，（主要出现在echarts图表样式上）

问题触发或复显条件：

1. 多个页面被keep-alive缓存
2. 被keep-alive缓存的组件都具有对$route的监听，或者其他对于全局状态量变化的监听

问题解决方案思考：

当页面跳转到A页面的时候，A页面$route监听事件被触发，B页面由于被keep-alive缓存导致$route监听事件被触发，然后由于两个响应的时间的快慢，或者是接口响应时间的快慢，导致页面的数据更新快慢不同，所以导致的问题，那么考虑actived事件不能完全解决，因为$route的watch事件是先于actived触发导致了虽然最后触发都是正常的，但是会出现多次数据跳动的问题。
考虑到代码量过大，如果按照改动页面内的echarts图表的唯一标识id，则改动量太大，且容易出错，所以后则考虑是否能够在对于$route的监听事件内添加对路由路径的判断来避免这个因素

目前暂替的解决方案：

1. 对于在vue2中使用$route的监听事件，需加上对于路由的判断，尤其为需要被keep-alive缓存的组件内部显得尤为重要
2. 对于在多个被keep-alive缓存的页面内所需要的展示的图标应尽量采用不同命名
3. 对于keep-alive组件的缓存应当慎用，只有当明确提出需求的时候再使用

未确认的问题

1. 目前不确认vue3是否也具有该问题，watch与keep-alive组件冲突