如何主动销毁vue中的保活缓存组件

问题的背景

我们的后台在切换一些选项卡时，使用保活缓存选项卡，并且还使用include属性来决定缓存哪个页面。选项卡的切换实际上就是路由的切换，也就是说，当打开一个新的选项卡时，url会发生变化，旧的选项卡如果在keep-alive的包含范围内，就会被缓存。

那么客服人员长时间打开反馈页面就会死机，因为不会刷新页面(工作需要)，而且总是有切换标签的习惯，最终导致内存增加，最后死机。

依赖环境

这个项目是基于一个开源的vue背景框架：https://github.com/PanJiaChen/vue-element-admin,然后代码已经由几个后端开发和维护！所以后端没有发现问题在哪里，然后我接手了问题。写文章的时候标签上没有vue，是差评！

布局问题

首先梳理业务逻辑：从业务场景来看，我们在切换选项卡时，如果新输入的选项卡已经被缓存，那么缓存的选项卡就可以直接显示出来，关闭选项卡时相应的组件也要销毁。

我花了一些时间检查代码，发现问题是当选项卡关闭时，虽然这个页面没有包含在keep-alive include中，但是组件没有被销毁，仍然在缓存中。我们可以通过Vue Devtools插件看到，与关闭的选项卡相对应的组件仍然存在：

当然，我觉得保活的逻辑没有问题，主要是我们的项目比较复杂，缓存的组件太多，总会增加，最终导致崩溃。

解决问题

现在问题已经找到了，解决问题就好了，只要在标签页关闭的时候销毁相应的组件就可以了。

在互联网上搜索后，发现一个组件可以通过使用：this来销毁。$ destroy('组件名')。

先说大概的思路：keep-alive的include中存储的其实是vuex中的一个数据源(该数据源存储的是路由名称)，关闭选项卡后会删除其中一个数据源。在此之前，我们在组件中听了这个数据源的变化。如果对应于此组件(安装时应保存)的已安装不再位于数据源中，则应销毁此组件。

代码大致如下：

const mixin={ data(){ return { Routepath : ' ' } }，mounted() { this.routePath=this。$route.path }，computed: { visitedViews() {返回此。$ store . state . tagsview . visitedviews } }，Watch: {已访问视图(值){If(值中没有routePath)这。$ destroy(这个。$ options.name)}}} Export默认mixin单独取出，然后在组件中使用mixin进行缓存并混合到组件对象中，这样组件中需要添加的代码量相对较少。

变更后，进行测试。选项卡关闭后，相应的组件将被销毁，使用Vue Devtools可以清楚地看到。

多想想

在我们如此频繁地在后台操作的业务场景中，使用保活并不是一个好的选择。

在我们修复了这个问题之后，当我们通过控制台中的内存来查看Memory页面的变化时，我们发现即使组件被销毁，也需要一些时间来回收。当我们在这段时间里不断创建/打开新的标签页时，内存仍然会在短时间内上升。而且有时候，过了一段时间记忆就不回收了。

Keep-alive本质上缓存了整个dom节点和相应的事件。当有很多这样的组件时，自然会占用大量内存。但是，如果我们只缓存这个组件中的数据，并在组件需要再次显示时临时渲染，肯定会节省大量内存。毕竟数据占用的空间其实很小，渲染组件也不会花很长时间(只要组件不是特别复杂)。

因此，优化的下一个阶段是删除keep-alive，然后使用vuex将数据缓存在组件中，然后在需要重新显示数据时取出并重新呈现。当然，这是一个大工程！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。