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 的编程能力
在复杂场景下编写更简洁的代码

虽然模板在大多数情况下仍然是最佳选择，但了解并掌握这些函数的使用，能够让你在遇到特定需求时有更多的解决方案。

对于初学者，建议先熟练掌握模板语法，然后再学习这些函数的使用。对于有经验的开发者，可以在合适的场景中尝试使用这些函数，体验它们带来的便利和灵活性。

无论选择哪种方式，最重要的是根据项目需求和个人偏好，选择最适合的开发方式。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13038