How to manually unmount Vue from the dom element components about core HOT 7 CLOSED

You can do like this.

const app = Vue.createApp()
    app.mount(Root, document.getElementById('app'))

    setTimeout(() => {
       // equal to $destroy
        Vue.render(null, document.getElementById('app') )
    }, 1000)

from core.

Maybe should add some api like unmount.

from core.

You can do like this.

const app = Vue.createApp()
    app.mount(Root, document.getElementById('app'))

    setTimeout(() => {
       // equal to $destroy
        Vue.render(null, document.getElementById('app') )
    }, 1000)

用这个方法可以实现 unmount 效果， 成功触发了 vue 组件的 beforeUnmount 。
谢了。

from core.

In Vue3, I tried the following code, and it can unmount an component (not the whole app):

      <router-view v-slot="{Component, route}">
        <keep-alive ref="keepAlive"><component :key="route.path" :is="Component" /></keep-alive>
      </router-view>

    onCloseTab(targetName) {
      const route = this.tabRoutes.find(route => targetName === route.params.f_id)
      this.$store.dispatch('removeTab', targetName)

      // 删除组件在keepalive里的cache，参考 pruneCacheEntry 这个方法的逻辑
      const key = route.path
      const keepAliveInstance = this.$refs.keepAlive.$
      const cache = keepAliveInstance.__v_cache
      const vnode = cache.get(key)
      if (vnode) {
        let shapeFlag = vnode.shapeFlag
        if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {
          shapeFlag -= 256 /* COMPONENT_SHOULD_KEEP_ALIVE */
        }
        if (shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {
          shapeFlag -= 512 /* COMPONENT_KEPT_ALIVE */
        }
        vnode.shapeFlag = shapeFlag

        const renderer = keepAliveInstance.ctx.renderer
        renderer.um(vnode, keepAliveInstance, keepAliveInstance.suspense)

        cache.delete(key)
      }
    }

this.$.ctx.renderer.um(vnode, keepAliveInstance, keepAliveInstance.suspense)

from core.

在 Vue3 中，我尝试了以下代码，它可以卸载一个组件（不是整个应用程序）：

      <router-view v-slot="{Component, route}">
        <keep-alive ref="keepAlive"><component :key="route.path" :is="Component" /></keep-alive>
      </router-view>

    onCloseTab(targetName) {
      const route = this.tabRoutes.find(route => targetName === route.params.f_id)
      this.$store.dispatch('removeTab', targetName)

      // 删除组件在keepalive里的cache，参考 pruneCacheEntry 这个方法的逻辑
      const key = route.path
      const keepAliveInstance = this.$refs.keepAlive.$
      const cache = keepAliveInstance.__v_cache
      const vnode = cache.get(key)
      if (vnode) {
        let shapeFlag = vnode.shapeFlag
        if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {
          shapeFlag -= 256 /* COMPONENT_SHOULD_KEEP_ALIVE */
        }
        if (shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {
          shapeFlag -= 512 /* COMPONENT_KEPT_ALIVE */
        }
        vnode.shapeFlag = shapeFlag

        const renderer = keepAliveInstance.ctx.renderer
        renderer.um(vnode, keepAliveInstance, keepAliveInstance.suspense)

        cache.delete(key)
      }
    }

this.$.ctx.renderer.um(vnode, keepAliveInstance, keepAliveInstance.suspense)

After the project is packaged, keepAliveInstance.__v_cache does not get the value

from core.

In Vue3, I tried the following code, and it can unmount an component (not the whole app):

      <router-view v-slot="{Component, route}">
        <keep-alive ref="keepAlive"><component :key="route.path" :is="Component" /></keep-alive>
      </router-view>

    onCloseTab(targetName) {
      const route = this.tabRoutes.find(route => targetName === route.params.f_id)
      this.$store.dispatch('removeTab', targetName)

      // 删除组件在keepalive里的cache，参考 pruneCacheEntry 这个方法的逻辑
      const key = route.path
      const keepAliveInstance = this.$refs.keepAlive.$
      const cache = keepAliveInstance.__v_cache
      const vnode = cache.get(key)
      if (vnode) {
        let shapeFlag = vnode.shapeFlag
        if (shapeFlag & 256 /* COMPONENT_SHOULD_KEEP_ALIVE */) {
          shapeFlag -= 256 /* COMPONENT_SHOULD_KEEP_ALIVE */
        }
        if (shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {
          shapeFlag -= 512 /* COMPONENT_KEPT_ALIVE */
        }
        vnode.shapeFlag = shapeFlag

        const renderer = keepAliveInstance.ctx.renderer
        renderer.um(vnode, keepAliveInstance, keepAliveInstance.suspense)

        cache.delete(key)
      }
    }

this.$.ctx.renderer.um(vnode, keepAliveInstance, keepAliveInstance.suspense)

after build not find __v_cache

from core.

vue2 in nuxt, 为何调用根结点的 vm.$destroy() 方法只能销毁vm, 却不能从DOM中移除mount 的DOM?

from core.