Vue3中如何通过编程方式销毁createVNode创建的组件实例？

你遇到的组件未正常销毁、内存泄漏的核心原因是手动创建的VNode没有绑定当前应用实例的上下文，导致Vue渲染器无法正确触发组件的卸载流程，下面是具体修复方案：

修复核心逻辑 #

通过createVNode生成的虚拟节点默认未关联应用上下文，需要手动将当前app的上下文赋值给VNode的appContext属性，才能让Vue正确管理组件的生命周期，执行卸载时正常释放所有响应式资源。

修复后完整代码 #

import { createVNode, Plugin, render } from 'vue'
import Alert from './Alert.vue'

const plugin: Plugin = {
    install(app, options) {
        const toast = {
            show(message: string) {
                const container = document.createElement('div')
                document.body.appendChild(container)

                const toastVNode = createVNode(Alert, { message })
                // 关键：绑定当前应用上下文
                toastVNode.appContext = app._context

                render(toastVNode, container)

                setTimeout(() => {
                    // 触发Vue自动卸载组件、清理响应式资源
                    render(null, container)
                    // 移除DOM节点
                    document.body.removeChild(container)
                    // 清空引用辅助垃圾回收
                    container = null
                    toastVNode = null
                }, 2500)
            }
        }
        app.provide('$Toast', toast)
    }
}

export default plugin

可选：直接调用组件实例卸载 #

你也可以直接访问VNode上的组件实例，主动调用卸载方法，效果和render(null, container)一致：

setTimeout(() => {
  toastVNode.component?.unmount()
  document.body.removeChild(container)
  container = null
  toastVNode = null
}, 2500)

验证卸载是否正常 #

在你的Alert.vue中添加onUnmounted生命周期钩子打印日志，确认卸载逻辑正常触发：

<script setup>
import { onUnmounted } from 'vue'
const props = defineProps(['message'])

onUnmounted(() => {
  console.log('Toast组件已卸载：', props.message)
})
</script>

如果日志正常打印，说明组件实例已经被完全销毁，关联的Vue内部资源已经释放，不会出现内存累积问题。

注意事项 #

如果Toast组件内部有自定义的定时器、全局事件监听、订阅等副作用，需要在onUnmounted中手动清理，这些不属于Vue的托管资源，需要开发者自行释放避免内存泄漏。

内容的提问来源于stack exchange，提问作者Audeo