虚拟dom 转真实dom

 虚拟dom在vue中的作用

<template>
<XtxMessage type='success'>添加成功</XtxMessage>
</template>

<script setup lang="ts">
// h 等价于 createVNode
// createVNode: 作用：创建虚拟DOM  (一个js对象, 可以模拟真实dom结构)
import { h, onMounted, render } from 'vue'
// 参数1：创建的虚拟DOM的节点类型  比如  div h1  a  img
// 参数2：虚拟DOM拥有的属性，是一个对象
// 参数3：虚拟DOM节点的内容

// <h1 title="标题" id="box" class="aa">我是标题</h1>
const vNode = h('h1', { title: '标题', id: 'box', className: 'aa' }, '我是标题')
console.log(vNode);
</script>

 打印结果

 为虚拟dom

要想把虚拟dom渲染成真实dom只需要一步

让虚拟dom调用render函数,渲染到某个具体的dom元素上面

<template>
<XtxMessage type='success'>添加成功</XtxMessage>
<div id="div"></div>
</template>

<script setup lang="ts">
// h 等价于 createVNode
// createVNode: 作用：创建虚拟DOM  (一个js对象, 可以模拟真实dom结构)
import { h, onMounted, render } from 'vue'
// 参数1：创建的虚拟DOM的节点类型  比如  div h1  a  img
// 参数2：虚拟DOM拥有的属性，是一个对象
// 参数3：虚拟DOM节点的内容

// <h1 title="标题" id="box" class="aa">我是标题</h1>
const vNode = h('h1', { title: '标题', id: 'box', className: 'aa' }, '我是标题')
onMounted(() => {
  // <div id='div'></div>这段代码在setup时没有被创建,要把它放入onMounted里创建
  const div = document.getElementById('div')
  console.log(div, vNode)
</script>

使用render

 不加if,它会报类型错误

打印结果