若依关闭页签不会销毁 keep-alive 缓存的组件

发布时间 2023-12-22 15:56:24作者: shayloyuki

问题场景

使用 keep-alive 缓存的组件。离开该页签时,组件状态为 inactive;点击该页签时,组件状态为 active

点击按钮关闭该页签 this.$tab.closePage(view),该组件被销毁。

image


需求:在页面A中删除数据B,则之前点击数据B打开的页签C会被关闭(使用 this.$tab.closePage(view))。

该需求已实现,但有个问题是:同样调用了 this.$tab.closePage(view),但是却无法销毁该组件。原因不明。

image


问题:因为没有销毁组件,导致旧数据没有被重置,新建数据M,点击数据M打开页签N时,会继续使用旧数据,导致页面加载报错。

解决

解决思路:在A页面删除数据时,关闭对应页签的同时要销毁对应组件。

方案一:deactive() 钩子中销毁组件

在页签组件 StandardVersion 中添加以下代码:

  deactivated() {
    this.$destroy();
  },

由于离开页签时,销毁了组件,那么再次点击页签时,会调用 created() 函数生成组件实例(会重新请求数据)。

缺点:keep-alive 缓存失去作用。

方案二(推荐):该组件不设置 keep-alive

既然方案一会让 keep-alive 失去作用,那干脆不设置 keep-alive。

页签组件 StandardVersion 的路由是在 router.js 中书写的,直接在 meta 选项中设置 noCache: true 即可。

image

总结

如果能找到:同样调用了 this.$tab.closePage(view),但是却无法销毁该组件的原因,就不用采取上述解决方案。