vue3手动卸载组件

封装message组件时需要手动卸载组件

Message.ts

import { createVNode, render } from 'vue'
import MessageComponent from './Message.vue'

export default function Message() {
	// 1.创建虚拟节点 createVNode(component)
	const vm = createVNode(MessageComponent)

	// 2.把虚拟节点变成真实节点 render(VNode, container)
	const container = document.createElement('div')
	render(vm, container)

	// 3.把渲染后的结果放到body中
	document.body.appendChild(container.firstElementChild!) //container.firstElementChild 去掉最外层的div

	// 4.卸载组件
	let timer = setTimeout(() => {
		render(null, container) //此render会移除dom
		clearInterval(timer)
	}, 3000)
}

MessageComponent.vue

<template>
	<div>message</div>
</template>