vue的keep-alive导致echarts获取不到dom

keep-alive的用法

官方文档：
https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive
https://cn.vuejs.org/v2/api/#keep-alive
https://cn.vuejs.org/v2/guide/migration.html#keep-alive-%E5%B1%9E%E6%80%A7-%E6%9B%BF%E6%8D%A2

注意点

1、和<transition>连用

和 <transition>一起使用时，确保把内容包裹在内：

<transition>
  <keep-alive>
    <component v-bind:is="view"></component>
  </keep-alive>
</transition>

可以理解为，因为keep-alive和router-view是连一起用的，拆开就没有保持缓存的作用了！！！
就连当前页面watch监控’$route’都会出错……

2、和echarts一起用

若当前路由A用到echarts，然后想使用keep-alive保持缓存。
在清空浏览器缓存后，初次登录当前页面A没有问题。
跳转离开，再次进入A，发现echarts图形无法正常绘制，报错获取不到dom的高度和宽度。
通过Element查看当前dom的高宽是存在的。
费解……
于是在生命周期钩子函数activated中获取dom节点查看高宽确实为0，即便使用setTimeout延迟获取dom节点查看高宽仍然为0。直到去掉keep-alive，一切恢复正常。
所以……
keep-alive还是不要用在有echarts的地方了。