Vue3使用h函数和render函数动态插入组件和元素

首先明白两个函数的大致作用

1. h函数（createVnode）用于创建一个虚拟DOM（用法可以自行查看文档）；
2. render函数用于输出虚拟DOM；在Vue是无法使用原生的方式将组件当做普通DOM动态加入到其他的DOM中，通过render函数的第二个参数指定需要挂载DOM

父组件代码片。

// An highlighted block
<template>
	<div class="home-box"></div>
</emplate>


<script setup>
import { ref, h,render,onMounted} from 'vue'
import Test from './Test.vue'
onMounted(() => {
		//创建一个容器用于存放需要动态渲染的组件
		let son = document.createElement('div')
		//把容器插入到指定的位置
		document
			.querySelector('.home-box')
			.insertBefore(son,document.querySelector('.home-box').firstChild)
		//使用render函数把组件挂载到容器上
		//第一个参数是我们使用h函数创造的VNode
		//第二个参数是需要挂载的位置
		render(h(Test),son)
	})

Test组件内容。

 <template>
	<el-button>{{ 0 }}</el-button>
	<el-button>{{ 0 }}</el-button>
</template>

最后的效果