首页 › Vue › 进阶特性 › render 函数与 JSX

当模板不够灵活时（比如动态生成大量不同标签），可以用 render 函数 或 JSX。

h() 函数

Vue 的 h() 函数创建 VNode（虚拟节点）：

import { h } from 'vue'

h('div', { id: 'app', class: 'container' }, [
  h('h1', '标题'),
  h('p', '段落')
])
// 等价于 <div id="app" class="container"><h1>标题</h1><p>段落</p></div>

完整签名

// h(tag, props, children)
h('div')                                      // 无 props
h('div', { id: 'foo' })                       // 有 props
h('div', { class: 'bar', style: { color: 'red' } })
h('div', '文本孩子')                            // 文本子节点
h('div', [h('span'), h('span')])              // 数组子节点
h('div', { id: 'foo' }, [h('span')])          // props + children

render 函数组件

<script>
import { h } from 'vue'

export default {
  props: { level: { type: Number, required: true } },
  render() {
    const tag = `h${this.level}`  // 动态标签名
    return h(tag, {}, [
      this.$slots.default?.()     // 渲染默认插槽
    ])
  }
}
</script>

使用：

<Heading :level="2">二级标题</Heading>

如果用模板实现同样功能需要写多个 v-if：

<h1 v-if="level === 1"><slot /></h1>
<h2 v-else-if="level === 2"><slot /></h2>
<!-- ... -->

渲染函数组件（Functional Component）

function Heading(props, { slots }) {
  return h(`h${props.level}`, slots.default())
}
Heading.props = ['level']

JSX

安装插件后，Vue 3 也支持 JSX：

npm install @vitejs/plugin-vue-jsx -D

// vite.config.ts
import vueJsx from '@vitejs/plugin-vue-jsx'
export default { plugins: [vue(), vueJsx()] }

JSX 组件：

// Heading.jsx
export default {
  props: { level: { type: Number, default: 1 } },
  setup(props, { slots }) {
    const tag = `h${props.level}`
    return () => h(tag, slots.default?.())
  }
}

或者直接用函数组件：

const Heading = (props, { slots }) => <h2>{slots.default?.()}</h2>

JSX 中的 Vue 特性

// 指令模拟
const App = {
  setup() {
    const visible = ref(true)
    return () => (
      <>
        {/* v-if */}
        {visible.value && <p>可见</p>}

        {/* v-for */}
        {['a', 'b'].map(item => <span key={item}>{item}</span>)}

        {/* v-model */}
        <input value={val.value} onInput={e => val.value = e.target.value} />

        {/* 事件 */}
        <button onClick={() => count.value++}>+1</button>

        {/* class/style */}
        <div class={['base', active.value && 'active']} style={{ color: 'red' }} />
      </>
    )
  }
}

何时用 render/JSX？

场景	推荐
大部分 UI	✅ 模板（更直观、编译优化更好）
动态标签名	✅ render 函数
大量条件逻辑的 UI	✅ JSX
高阶组件封装	✅ h() 函数
组件库开发	✅ JSX（灵活性高）

小结

API	用途
h()	创建 VNode，render 函数核心
JSX	更接近 JavaScript 的模板语法
函数组件	无状态的纯渲染组件
适用场景	动态标签、大量条件逻辑、组件库

上一节：组合函数（Composables） 下一节：自定义指令

贡献者: 布欧-Lewyon