Vue3 中两个重要的函数：h 和 createVNode
vue3 带来了很多新特性，其中 h 函数和 createVNode 函数对组件开发方式产生了很大影响。这两个函数让我们能够更灵活地创建组件，为开发工作提供了新的选择。
为什么需要这些函数？
要理解这两个函数的作用，我们需要先了解 Vue 的模板是如何工作的。
在 Vue2 时期，我们主要使用模板来编写组件：
<template>
<div>{{ message }}</div>
</template>这些模板会被编译成渲染函数：
function render() {
return _c('div', [_v(_s(message))])
}这种方式虽然简单易用，但也存在一些限制：
动态组件需要使用特殊的 <component :is> 语法
无法充分利用 JavaScript 的编程能力
复杂逻辑需要分散在模板和脚本两个区域
虚拟dom的出现改变了这种情况。虚拟DOM就像是一个轻量级的蓝图，用 JavaScript 对象来描述真实的 DOM 结构：
interface VNode {
type: string | Component // 元素类型
props: Record<string, any> // 属性
children: VNode[] | string // 子节点
key?: string | number // 优化标识
}这种设计有几个好处：
通过比较算法减少对真实 DOM 的操作
可以在不同平台使用（网页、小程序、Canvas）
提供更灵活的编程方式
h 函数与 createVNode 的关系
很多人会问：h 函数和 createVNode 有什么区别？其实它们关系很密切。
createVNode 是底层的虚拟节点创建函数，而 h 函数是对 createVNode 的封装，提供了更方便的使用方式。
从源码层面看：
// createVNode 是核心实现
export const createVNode = (...)
// h 函数基于 createVNode，提供更好的类型支持
export function h(type: any, props?: any, children?: any): VNode {
return createVNode(type, props, children)
}简单来说，h 函数可以看作是 createVNode 的简化版本，更适合在日常开发中使用。
具体使用方法
下面通过几个实际场景来看看如何使用这些函数。
创建基本元素：
// 创建一个带点击事件的按钮
const button = h(
'button',
{
class: 'btn-primary',
onClick: () => console.log('按钮被点击了'),
'>: 'submit-btn'
},
'提交表单'
)这相当于模板中的：
<button class="btn-primary" @click="handleClick" >="submit-btn">
提交表单
</button>创建组件：
import CustomInput from './CustomInput.vue'
const inputField = h(CustomInput, {
modelValue: '默认值',
'onUpdate:modelValue': (value) => {
console.log('值更新了:', value)
}
})处理动态内容：
// 生成待办事项列表
const todoList = h('ul',
{ id: 'todo-list' },
todos.value.map((todo, index) =>
h('li', {
key: todo.id,
class: { completed: todo.done }
}, todo.text)
)
)Vue3 的重要变化
与 Vue2 相比，Vue3 在使用方式上有些不同。
Vue2 的写法：
export default {
render(h) {
return h('div', {
attrs: { id: 'box' }
}, [
h('span', 'Hello')
])
}
}Vue3 的写法：
import { h } from 'vue'
export default {
setup() {
return () => h('div', {
id: 'box'
}, [
h('span', 'Hello')
])
}
}主要变化包括：
属性不再需要放在 attrs 对象里
需要从 vue 包中导入 h 函数
在 setup 函数中返回渲染函数
Vue3 还引入了静态节点提升的优化：
const staticNode = h('div', { class: 'logo' }, '静态内容')
export default {
setup() {
const dynamicData = ref(0)
return () => [
staticNode, // 这个静态节点会被复用
h('p', dynamicData.value) // 只有这个动态节点会更新
]
}
}使用建议
什么时候适合使用这些函数？
推荐使用的场景：
需要根据数据动态决定使用哪个组件
开发高阶组件或抽象组件
需要精确控制渲染过程的复杂场景
不推荐使用的场景：
简单的静态布局
已经有现成模板组件的情况
注意性能问题：
不推荐的写法：
function BadExample() {
return h('div',
[1, 2, 3].map(n => h('span', n)) // 每次都会创建新数组
)
}推荐的写法：
const staticItems = [1, 2, 3].map(n => h('span', n))
function GoodExample() {
return h('div', staticItems) // 复用静态节点
}与 JSX 配合使用
如果你更喜欢 JSX 语法，也可以配合使用：
首先配置构建工具：
// vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
jsx: true // 启用 JSX 支持
})
]
}然后在组件中使用：
export default defineComponent({
setup() {
const count = ref(0)
return () => (
<div class="counter">
<button onClick={() => count.value++}>
{count.value}
</button>
</div>
)
}
})实际应用场景
这些函数在实际项目中很有用。比如开发一个动态表单组件：
const DynamicForm = defineComponent({
setup(props) {
return () => {
const fields = props.fields.map(field => {
// 根据字段类型选择不同的组件
const componentType = getComponentType(field.type)
return h(componentType, {
modelValue: field.value,
'onUpdate:modelValue': (value) => {
field.value = value
},
placeholder: field.placeholder,
key: field.id
})
})
return h('form', { class: 'dynamic-form' }, fields)
}
}
})总结
h 函数和 createVNode 函数为 Vue 开发提供了更多可能性。它们让开发者能够：
更灵活地控制组件渲染
充分利用 JavaScript 的编程能力
在复杂场景下编写更简洁的代码
虽然模板在大多数情况下仍然是最佳选择，但了解并掌握这些函数的使用，能够让你在遇到特定需求时有更多的解决方案。
对于初学者，建议先熟练掌握模板语法，然后再学习这些函数的使用。对于有经验的开发者，可以在合适的场景中尝试使用这些函数，体验它们带来的便利和灵活性。
无论选择哪种方式，最重要的是根据项目需求和个人偏好，选择最适合的开发方式。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
