携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情
虚拟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,它会报类型错误
打印结果
