vue keep-alive情况下切换页面的tab并改变宽高以后发现echarts内容变成空白

vue中使用keep-alive缓存后处于disactivated状态的echarts表格自适应功能（resize）失效的解决办法

在vue开发中的时候，使用keep-alive监听的页面，echart或者地图相关的模块，测试提出了一个bug，页面偶现空白。

经过排查发现重现步骤如下：

　　离开当前页面以后，再其他tab页面切换了窗口大小，再回到原页面，发现echart不显示了，再重新改变一下窗口大小，就又恢复正常

原因：　　

　　之前为了实现echarts的自适应，添加了一个监听器监测window窗口是否发生变化，如果变化了就执行echarts自带的resize方法来改变一下echarts的大小，并且将这个方法习惯性地写在了生成echarts的方法中。但是，我们使用了keep-alive，进行缓存后情况就有点不一样了。我们绘制Echarts的方法是写在mounted生命周期中的，而切换页面并会不会进入destroyed生命周期，而是进入disactivated生命周期，这使得mounted中的函数还是激活状态，我们之前添加的监听器仍然在工作，但是但是但是，之前缓存页面的dom没了，打印出来的高度为0，我们的eventListener监听到了别人家的dom变了，高度为0，所以图表也为0。

　　然后，当切换回已缓存的页面时，bug就来了。echarts消失了。

　　然后你再改变一下宽口大小，echarts又回来了。。。

　　这是因为你之前你改变dom的时候，echarts重画失败了，可是你切回来的时候，dom虽然相对于你切出去之前可能变了，但是对于监听器来说，他只关注于当前dom大小是否改变了。所以刚切回来的时候echarts的resize方法不会被激活。而只要稍稍改变一下dom的大小，就可以激活resize方法。

解决方案如下：

　　方法一：引入element-resize-detector插件进行处理

　　方法二：使用指令方法，监听DOM元素宽度变化。该方法是定时循环调用时间监听，判断宽高变化，比较消耗资源，不建议。

 参考文档：

https://blog.csdn.net/kiwon1993/article/details/102638808

https://blog.csdn.net/csl125/article/details/115075643