Vue ＜keep-alive＞踩坑与解决记录

使用vue的keep-alive 可以缓存加载的组件
keep-alive存在的问题
假设有下面若干tab
[ tab1    tab2    tab3 ]
三个tab通过切换
若：tab1未加载完成时，切换tab2
则：
tab1中的异步代码仍会继续执行，如果有获取dom元素的代码（包括this.$refs）则会获取不到。
由于keep-alive原因，vuex变量变化 ==> tab1中变量变化  ==> 触发相应方法。
可能会导致控制台报错。
解决办法
基本思路：
若：tab页面未加载完，切换其他tab。
则： 不缓存此组件。
若：tab页面已加载完。
则：缓存tab组件。
如何控制组件是否缓存
使用keep-alive 标签的include属性或exclude属性。不能使用this.$destroy()，这个可以使该组件不被缓存，但是也切断了与keep-alive的联系，下次打开不能再被缓存。（或者$destroy后再通过改变

Vue ＜keep-alive＞踩坑与解决记录最先出现在Python成神之路。