从 keep-alive 中手动移除（并销毁）组件

Posted 2023-02-22

【中文标题】从 keep-alive 中手动移除（并销毁）组件

【英文标题】：Manually remove (and destroy) a component from keep-alive

【发布时间】：2022-01-03 21:17:10

【问题描述】：

我找不到如何访问从 Vue Route 加载并通过 <keep-alive> 和 <component> 持久化的组件实例，以便我可以通过编程方式卸载它。

我正在实现一个动态选项卡系统，以便每个选项卡呈现一个 URL，该 URL 反过来显示其声明的组件。我不想在每次创建新选项卡或选择另一个选项卡时加载新路由时卸载组件。我通过在一个名为 MultiTabs 的自定义组件中结合 keep-alive/component 来实现它：

<multi-tabs>
   <router-view v-slot=" Component ">
       <keep-alive>
           <component :is="Component" />
       </keep-alive>
   </router-view>
</multi-tabs>

到目前为止一切顺利。假设我有这些路线：

//...

   path: '/foo',
   name: 'Foo',
   component: () => import("./components/pages/Foo.vue"),
,

   path: '/bar',
   name: 'Bar',
   component: () => import("./components/pages/Bar.vue"),
,
//...

router.beforeEach((to, from, next) => 
   store.dispatch('addTab', to); // --> Vuex would then add this route to a list of tabs (routes), which I will retrieve from the MultiTabs component.
   next();
);

从我的 MultiTabs 组件中，我获取所有选项卡（查询的路由），并将它们显示为选项卡导航，以及应该呈现的组件：

MultiTabs.vue：

<template>
   <!-- ... -->
   <!-- MultiTab has a close button which emits the tabClosed event  -->
   <multi-tab 
      v-for="route of storedTabs" 
      :key="route.fullPath" 
      :route="route" 
      @selectedRoute="selectRoute" 
      @tabClosed="closeTab"
      >
   </multi-tab>
   <!-- ... -->
   <!-- This is where the component for the selected route is rendered -->
   <div class="tab-pane">
      <slot/>
   </div>
</template>

因此，当用户单击选项卡中的关闭按钮时，我想从内存中释放相应的组件。请注意，浏览选项卡时不会发生这种情况，因为我使用了 keep-alive 并且想要这种行为，这样组件就不会再次挂载，它会再次执行对服务器的异步调用。

【参考方案1】：

很遗憾，此类功能尚不存在。 Vue repo 中几乎没有问题，包括this one，您可以在其中找到如何执行此操作的 hacky 示例，但它使用了一些内部细节，因此使用它可能会有风险，因为这些细节可能随时更改...

这是一个持续的discussion/RFC，所以如果你需要这个，请随时参与讨论或投票

在实现上述功能之前，您最好的选择可能是重构您的组件并做您需要做的事情，不仅在 created/mounted 钩子中，而且在 activated 钩子中，当保持时调用 -激活组件

【讨论】：

感谢您的回复，尽管有坏消息。我会继续关注 Github 上的讨论。现在，我会将您的答案标记为已接受。