是小鬏鬏啊1. 为什么需要掌握 Vue 渲染函数与 JSX
在 Vue 生态中，模板语法已经能满足 90% 的开发需求，但当你遇到以下场景时，渲染函数和 JSX 就会成为救命稻草：
- 需要动态生成高度灵活的组件结构时（比如根据后端配置渲染不同表单控件）
- 开发高阶组件(HOC)或需要精细控制渲染过程时
- 在 TypeScript 项目中追求更好的类型提示
- 需要复用 React 生态的 JSX 组件时
我去年在开发可视化表单引擎时就深有体会 - 当表单字段的排列组合达到上百种时，模板中的 v-if 链会变得难以维护，而用渲染函数就能优雅地通过 JavaScript 的逻辑处理能力动态生成 VNode。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 渲染函数核心：h() 函数深度解析
2.1 h() 函数的基本形态
h() 是 hyperscript 的简称，它的核心签名如下：
javascript复制h(
'div', // 标签名或组件
{ /* props/attrs */ },
[ /* children */ ]
)
实际项目中更常见的用法是结合解构：
javascript复制const vnode = h('button', {
class: ['btn', { 'btn-primary': isPrimary }],
onClick: handleClick
}, 'Submit')
关键细节：class 和 style 在 Vue 的渲染函数中享受特殊处理，既支持字符串也支持对象/数组形式
2.2 属性处理的注意事项
在模板中简单的属性绑定，在渲染函数中需要明确区分 DOM 属性和组件 props：
javascript复制h('input', {
// DOM 属性
id: 'email-input',
// 组件 props
props: {
value: modelValue
},
// 原生事件
on: {
input: e => context.emit('update:modelValue', e.target.value)
}
})
常见踩坑点：
- 事件监听要用
on前缀（如onClick） - 具名插槽需要通过
scopedSlots传递 - 直接写
class和style会被视为 props 而非 DOM 属性
2.3 动态组件的高级用法
通过渲染函数可以轻松实现动态组件：
javascript复制const dynamicComponent = h(
resolveComponent(componentName),
{
...props,
on: listeners
},
children
)
我在权限管理系统中的实践：根据用户角色动态加载不同的功能模块组件，配合 defineAsyncComponent 实现按需加载。
3. JSX 在 Vue 中的完整实践
3.1 配置 JSX 支持
Vue 3 默认不包含 JSX 支持，需要安装官方插件：
bash复制npm install @vue/babel-plugin-jsx -D
然后在 babel.config.js 中添加：
javascript复制module.exports = {
plugins: ["@vue/babel-plugin-jsx"]
}
3.2 JSX 与模板的语法对比
| 特性 | 模板语法 | JSX 语法 |
|---|---|---|
| 条件渲染 | v-if/v-else | 三元表达式/&& 运算符 |
| 循环 | v-for | Array.map() |
| 事件绑定 | @click | onClick |
| 插槽 | <slot> 标签 |
props.children |
| 动态组件 | <component> 标签 |
直接使用变量 |
3.3 类型安全的 JSX 组件
在 TypeScript 项目中，可以定义 JSX 元素的类型：
typescript复制import { DefineComponent } from 'vue'
interface ButtonProps {
type?: 'primary' | 'default'
size?: 'large' | 'small'
}
const Button: DefineComponent<ButtonProps> = (props, { slots }) => {
return <button class={[props.type, props.size]}>{slots.default?.()}</button>
}
这样在使用时就能获得完善的类型提示和 props 校验。
4. 性能优化与实战技巧
4.1 减少不必要的渲染
在渲染函数中，可以精细控制更新逻辑：
javascript复制export default {
props: ['item'],
render() {
// 只有特定条件才重新渲染
if (!this.item.visible) return null
return h(ExpensiveComponent, { item: this.item })
}
}
对比模板语法，这避免了在父组件更新时总是重新创建 VNode 的开销。
4.2 复用 VNode 对象
对于静态内容，可以在 created 钩子中缓存 VNode：
javascript复制created() {
this.cachedTitle = h('h1', 'Dashboard')
},
render() {
return h('div', [this.cachedTitle, dynamicContent])
}
4.3 与 Composition API 结合的最佳实践
javascript复制setup(props) {
const count = ref(0)
return () => (
<div>
<button onClick={() => count.value++}>
Count is: {count.value}
</button>
{props.items.map(item => (
<ListItem key={item.id} item={item} />
))}
</div>
)
}
这种模式被称为 "renderless component"，逻辑和渲染完全分离，同时享受响应式系统的所有能力。
5. 常见问题排查指南
5.1 事件监听不生效
症状：定义了 onClick 但点击无反应
排查步骤：
- 确认使用的是
on前缀（JSX 中为驼峰命名） - 检查事件处理器是否用箭头函数绑定正确上下文
- 在 Chrome DevTools 中检查生成的 DOM 是否有事件监听器
5.2 插槽内容不显示
解决方案：
javascript复制// 具名插槽
h(Component, null, {
default: () => 'default content',
header: () => h('h1', 'Title')
})
// JSX 中
<Component>
{{
default: () => <p>content</p>,
header: () => <h1>Title</h1>
}}
</Component>
5.3 样式类名不生效
可能原因：
- 在渲染函数中 class 被错误地放在 props 对象中
- 样式作用域冲突（特别是在使用 scoped CSS 时）
正确写法：
javascript复制h('div', {
class: ['active', { 'error': hasError }], // 正确
// 错误示例：props: { class: '...' }
})
6. 从模板迁移到渲染函数的策略
对于已有项目，建议的渐进式迁移方案：
- 先在单个功能组件中尝试渲染函数
- 使用
vue-compiler将模板编译为渲染函数参考 - 对复杂逻辑逐步重构
- 建立代码规范确保团队一致性
迁移示例 - 模板：
html复制<template>
<div class="card">
<h3 v-if="title">{{ title }}</h3>
<slot></slot>
</div>
</template>
等效渲染函数：
javascript复制render() {
return h('div', { class: 'card' }, [
this.title ? h('h3', this.title) : null,
this.$slots.default()
])
}
在大型项目中，我通常会先为团队制作一个渲染函数速查表，列出常见模式的对应写法，这能显著降低学习成本。