手动渲染虚拟dom

方式一：转化为组件

第一步：

定义一个组件转化方法并在 render 函数中返回虚拟dom

// renderVue.js
import { defineComponent } from 'vue'

const VNode = defineComponent({
  props: {
    content: {
      type: Object
    }
  },
  render(ctx) {
    return ctx.content
  }
})

export default VNode

第二步：

引用组件并传入 vnode

<template>
	<renderVue :content="h('span',{innerHTML: 'hello'})"/>
</template>
<script setup>
import renderVue from './renderVue'
import {h} from 'vue'
</script>

方式二：插入已有dom

<template>
	<span v-html="toHtml(h('span',{innerHTML: 'hello'}))"></span>
</template>
<script setup>
import {render} from 'vue'
const toHtml = (vnode) => {
  const span = document.createElement('span')
  render(vnode, span)
  return span.innerHTML
}
</script>