Vue3 render() 函数（保姆级教程）

核心概念

Vue 3 render() 函数是组件渲染的核心机制，通过 JavaScript 创建虚拟 DOM。其本质是函数式组件的返回值，接收 h 函数作为参数（h 是 createVNode 的别名），开发者可直接操作 DOM 构建逻辑。与模板编译相比，render 函数提供更灵活的动态控制，例如：根据条件生成不同结构、操作子组件实例、处理插槽分发等。这种底层能力在需要极致性能或动态渲染的场景中尤为重要。

基础语法

创建组件

const MyComponent = {
  render(h) {
    return h('div', 'Hello Vue3') // 创建 div 节点并添加文本
  }
}

传递 props

h('input', {
  class: 'form-control', // 添加类名
  onInput: (e) => this.inputValue = e.target.value // 绑定事件
})

渲染插槽

h('div', this.$slots.default?.() || '默认内容') // 优先使用插槽内容

处理子组件

h(ChildComponent, {
  ref: 'childRef', // 持有子组件引用
  props: { value: this.modelValue } // 传递 props
})

进阶特性

特性	说明	示例
Fragment	支持返回多个根节点	return [h('h1', '标题'), h('p', '内容')]
Teleport	跨层级 DOM 挂载	h(Teleport, { to: '#modal-container' }, modalContent)
Suspense	异步组件渲染	h(Suspense, { onResolve: () => console.log('加载完成') }, asyncComponent)

动态组件

h(resolveComponent(this.componentName), {
  onVnodeMounted: () => console.log('组件挂载') // 组件生命周期钩子
})

表单联动

h('input', {
  modelValue: this.formData.name, // 双向绑定
  onInput: (e) => this.formData.name = e.target.value
})

实战应用

动态表单生成器

render(h) {
  return h('form', this.fields.map(field => 
    h('div', {
      key: field.name, // 唯一标识
      class: 'form-group' // 通用样式
    }, [
      h('label', field.label), // 创建标签
      h(field.type, {
        modelValue: this.model[field.name], // 双向绑定
        onInput: (e) => this.model[field.name] = e.target.value // 更新数据
      })
    ])
  ))
}

性能优化场景

render(h) {
  if (this.isSimpleMode) {
    return h('div', this.data) // 简单渲染模式
  }
  return h('div', {
    key: this.data.id, // 避免重复渲染
    style: { transition: 'all 0.3s' } // 添加过渡效果
  }, this.data.name)
}

注意事项

避免过度封装：复杂逻辑直接写在 render 函数内反而更清晰
性能陷阱：频繁创建新对象会导致 diff 算法失效
API 变化：Vue 3 中 h 函数不再需要显式导入
调试困难：建议在开发环境添加 key 属性辅助 Vue 识别组件

Vue3 render() 函数是组件渲染的核心能力，理解其工作原理能显著提升开发灵活性。合理使用 h 函数和虚拟 DOM 特性，可构建高性能的动态组件结构。