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

Question

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

我正在实现一个动态选项卡系统，以便每个选项卡呈现一个 URL，然后显示其声明的组件。 我不想在每次创建新选项卡或 select 另一个选项卡时加载新路由时卸载组件。 我通过在一个名为 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>

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

Answer 1

不幸的是，这样的功能还不存在。 Vue repo 中几乎没有问题，包括这个问题，您可以在其中找到一个 hacky 示例如何做到这一点，但它使用了一些内部细节，因此使用它可能会有风险，因为这些细节可以随时更改......

这是一个正在进行的讨论/RFC ，所以如果你需要这个，请随时参与讨论或投票

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