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

Posted 2023-02-22

【中文标题】如何销毁/卸载 vue.js 3 组件？

【英文标题】：How to destroy/unmount vue.js 3 components?

【发布时间】：2021-03-17 16:47:40

【问题描述】：

我有一个相当大的 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 的重大更改 documentation 我们可以看到：

已移除的 API

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

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

【参考方案1】：

destroy hook 已被 unmounted 取代。 我想你可以从组合 API 中导入 unmounted。

【参考方案2】：

你可以在这里找到卸载命令：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-component

我稍微改进了功能：

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了。

【参考方案3】：

试试v-if

<template>
  <div
    v-if="!close"
    :class="`z-50 absolute py-4 mx-4 $position`"
    data-testid="notification"
  >
      ...
      <div v-if="enableClose" class="cursor-pointer absolute right-1 top-3 text-gray-500 text-2xl" @click="onClose">
        &times;
      </div>
    </Flash>
  </div>
</template>

<script lang="ts">
import defineComponent, render from "vue";
import Flash from "@/core/shared/components/Layout/Flash.vue";

export default defineComponent(
  name: "Toast",
  components: 
    Flash,
  ,
  props: 
    ...
    enableClose: 
      type: Boolean,
      default: true,
    ,
  ,
  computed: 
    ...
  ,
  data() 
    return 
      close: false
    ;
  ,
  methods: 
    onClose() 
      this.close = true;
    ,
  ,
);
</script>