渲染函数是vue底层渲染机制，jsx是其语法糖；渲染函数通过render(h)返回vnode，h接收标签名、数据对象和子节点三参数，jsx需babel转译为h调用，二者适用于动态组件、表单生成器等复杂场景。
Vue 组件的渲染函数（Render Functions）和 JSX 都是用来替代模板、实现更灵活 UI 构建的方式，但它们定位不同：渲染函数是 Vue 的底层渲染机制，JSX 是基于它的语法糖——写起来像 HTML，实际编译后仍调用 h()（即 createElement）生成虚拟节点。
渲染函数的核心用法
渲染函数通过 render(h) 定义，h 是创建 VNode 的工厂函数，接收三个参数：
-
第一个参数：标签名（如
'div'）、组件选项对象或构造函数（如MyComponent），必填； -
第二个参数：数据对象，包含
class、style、attrs、props、on（事件）、nativeOn（原生事件）等，可选； - 第三个参数：子节点，可以是字符串、VNode 数组或混合结构，可选。
例如动态标题组件：
render(h) {
return h(`h${this.level}`, this.$slots.default)
}
比用六层 v-if 清晰得多，也更容易复用和测试。
JSX 是让渲染函数更易写的语法糖
JSX 不是 Vue 原生语法，需借助 Babel 插件（如 @vue/babel-preset-jsx）转译为 h() 调用。它保留了 JavaScript 的表达能力，又接近 HTML 的直观性：
render() {
return (
<div class="container">
<h1>{this.title}</h1>
<button onclick="{this.handleClick}">Click me</button>
</div>
)
}
注意：JSX 中不支持 v-model、v-show 等指令，需用等价属性+事件手动实现，比如 v-model 对应 value + on:input。
什么时候该用渲染函数或 JSX？
不是所有场景都适合替换模板。以下情况更适合启用它们：
- 需要根据运行时数据决定渲染哪个组件（如权限控制下的
h(this.isAdmin ? AdminPanel : GuestView)）； - 封装高度可配置的通用组件（如表格列渲染器、表单生成器）；
- 开发函数式组件（无状态、无实例、纯渲染逻辑）；
- 做服务端渲染（SSR）或构建组件库，需要精细控制 VNode 结构。
简单页面或业务组件，模板仍是首选——语义清晰、指令丰富、团队协作成本低。
常见注意事项
使用过程中容易忽略的关键点：
-
render函数必须返回且仅返回一个根 VNode，不能是数组（除非用h('div', [...])包裹）； - JSX 中事件监听用
on:click或onClick，不支持.prevent等修饰符，需在 handler 里event.preventDefault()； - 类名和样式绑定语法与模板一致：
class={{ active: isActive }}、style={{ color: textColor }}； - Vite 项目推荐用
@vitejs/plugin-vue-jsx，比旧版 Babel 插件更轻量、类型支持更好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
