mounted 的时候保存下来）已经不在数据源中了，那就应该销毁此组件。代码大概如下：
const mixin = {
data() {
return {
routePath: ''
}
},
mounted() {
this.routePath = this.$route.path
},
computed: {
visitedViews() {
return this.$store.state.tagsView.visitedViews
}
},
watch: {
visitedViews(value) {
if(value 里没有了 routePath 这一项)
this.$destroy(this.$options.name)
}
}
}
}export default mixin
这一段代码单独拎出来了，然后在需要缓存的组件里使用
mixins 混入到组件对象中，这样组件中要添加的代码量就比较少了。更改后经过测试，关闭标签页后对应的组件就会被销毁掉，使用
Vue Devtools 能看的很清楚。更多思考
在我们后台操作这么频繁的业务场景下，使用
keep-alive 其实并不是一个好的选择。在我们修复这个问题后，我们通过控制台里的
Memory 查看页面内存的变化时，发现组件即便被销毁，也要经过一段时间才能回收完，当我们在这一段时间一直创建/打开新的标签页时，内存还是会在短时间内高涨。而且有时候，内存在经过一段时间后也并没有回收掉。
keep-alive 本质上是把整个
dom 节点及对应的事件等都缓存下来了，当这样的组件很多的时候，自然会占用很多内存。而如果我们只缓存这个组件中的数据，在需要这个组件再次显示的时候再临时渲染那肯定要节省很多内存的，毕竟数据占的空间其实很小的，而渲染组件要花的时间也不会很长（只要组件不是特别特别复杂）。所以，下一阶段的优化工作就是把
keep-alive 去掉，然后使用
vuex 来缓存组件中的数据，当需要重新显示数据时再把数据取出来并重新渲染。当然，这是一个比较大的工程!
