如何销毁/卸载 vue.js 3 组件？

Question

我有一个相当大的 vue.js 2 应用程序，它具有动态选项卡机制。用户可以与应用程序打开和关闭选项卡进行交互，每个选项卡代表一条路线。为了实现这一点，我正在使用 vue 路由器并保持活动状态，如下例所示。

 <template>
  <div id="app">
    <keep-alive>
      <router-view :key="routerViewKey"/>
    </keep-alive>
  </div>
</template>

当用户单击关闭选项卡按钮时，将调用 $destroy 函数以从缓存中删除其组件。我正在将此应用程序从 vue 2 迁移到 vue 3，但是，阅读 vue.js 3 的重大更改 文档 我们可以看到：

删除的 API

$destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。

到目前为止我没有找到任何替代方案，那么我如何以编程方式销毁/卸载 vue.js 3 keep-alive 中的缓存组件？

编辑 1（4 月 22 日） ：到目前为止，仍然不可能在 vue.js 3 中实现 $destroy 在 vue.js 2 上所做的事情。目前有一个 RFC 可以解决这个问题（ https://github .com/vuejs/rfcs/discussions/283 ），但不幸的是它已经开放了一年多而没有任何反馈。

原文由 marceloatg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在此处找到卸载命令： https ://v3.vuejs.org/api/application-api.html#unmount

不幸的是，如果您想在您的应用程序中执行此操作，文档中没有任何方法可以执行此操作。但是，在分析对象之后，我找到了一种方法。你可以通过使用这个来实现它： this.$.appContext.app.unmount();

我不是这个解决方案的超级粉丝，因为它在未来的版本中不再有效，但它在我的项目中运行良好。

编辑：另一种方法是根据以下内容扩展 Vue 对象： https ://github.com/vuejs/vue-next/issues/1802 和 https://github.com/pearofducks/mount- vue组件

我稍微改进了功能：

 function mount(component, { props, children, element, app } = {}) {
    let el = element

    let vNode = createVNode(component, props, children)
    vNode.destroy = () => {
        if (el) render(null, el)
        el = null
        vNode = null
    }
    if (app?._context) vNode.appContext = app._context
    if (el) render(vNode, el)
    else if (typeof document !== 'undefined' ) render(vNode, el = document.createElement('div'))

    const destroy = () => {
        if (el) render(null, el)
        el = null
        vNode = null
    }

    return { vNode, destroy, el }
}

您现在可以跟踪您作为孩子拥有的组件，使用以下方法从父母和孩子中销毁它： this.$.vnode.destroy();

但是，新的官方方式现在似乎使用 createApp 。

原文由 Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议