Vue3创建虚拟DOM（createVNode，render , h）

在绝大多数情况下，vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 javascript 完全的编程能力。这时渲染函数就派上用场了。

createVNode()、render()

createVNode —— 创建虚拟 DOM：

@param 参数1 创建元素类型，必选
@param 参数2 创建元素属性
@paran 参数3 创建元素内容

render —— 渲染虚拟 DOM：

@param 参数1 要被渲染的虚拟 DOM，必选
@param 参数2 要渲染的位置，必选

代码示例

<template>
  <div>测试创建DOM</div>
</template>
 
<script lang="ts" setup>
import { createVNode, render } from 'vue'
 
/**
 * createVNode —— 创建虚拟 DOM
 * @param 参数1 创建元素类型，必选
 * @param 参数2 创建元素属性
 * @paran 参数3 创建元素内容
 * @description 虚拟 DOM 创建完成后，需要使用 render 函数，才能在页面中渲染
 */
const testDiv = createVNode('div', { id: "myDivId" }, 'Lyrelion');
console.log('虚拟 DOM 状态 --- testDiv ---', testDiv);
 
/**
 * render —— 渲染虚拟 DOM
 * @param 参数1 要被渲染的虚拟 DOM，必选
 * @param 参数2 要渲染的位置，必选
 * @description 虚拟 DOM 创建完成后，需要使用 render 函数，才能在页面中渲染
 */
render(testDiv, document.body);
</script>

h()函数

在vue中 vue 提供了一个 h() 函数用于创建 vnodes

import { h } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

h 函数本质上是用了 vue 内置函数 —— createVNode()、render() 实现的

h 函数接收的参数

type —— 元素的类型，必选
propsOrChildren —— 数据对象（props、attrs、dom、class、style、...）
children —— 子节点，可以包含混合的 VNode 和字符串

使用方法

// 除了类型必填以外，其他的参数都是可选的
h('div')
h('div', { id: 'foo' })

// attribute 和 property 都能在 prop 中书写
// vue 会自动将它们分配到正确的位置
h('div', { class: 'bar', innerHTML: 'hello' })

// 像 `.prop` 和 `.attr` 这样的的属性修饰符
// 可以分别通过 `.` 和 `^` 前缀来添加
h('div', { '.name': 'some-name', '^width': '100' })

// 类与样式可以像在模板中一样
// 用数组或对象的形式书写
h('div', { class: [foo, { bar }], style: { color: 'red' } })

// 事件监听器应以 onXxx 的形式书写
h('div', { onClick: () => {} })

// children 可以是一个字符串
h('div', { id: 'foo' }, 'hello')

// 没有 props 时可以省略不写
h('div', 'hello')
h('div', [h('span', 'hello')])

// children 数组可以同时包含 vnodes 与字符串
h('div', ['hello', h('span', 'hello')])

以上这篇vue3创建虚拟dom（createVNode，render , h）就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。