vue渲染函数和jsx是模板的务实补充，本质均为生成vnode，区别仅在语法：渲染函数调用h()，jsx为语法糖；适用场景包括动态标签、复杂条件、函数式组件等，需权衡表达力与可维护性。
Vue 的渲染函数和 JSX 不是替代模板的“高级炫技”，而是当逻辑动态性超出模板表达能力时的务实选择。它们本质相同——都是生成虚拟节点（VNode）的编程方式，区别在于写法：渲染函数用原生 JavaScript 调用 h()（即 createElement），JSX 则是更接近 HTML 的语法糖，最终也被编译为同样的 h() 调用。
什么时候该用渲染函数或 JSX
模板足够清晰、静态结构明确时，坚持用模板。以下情况才值得切换：
- 需要根据运行时数据动态决定标签名（如
h1～h6）、组件类型或插槽分发策略 - 条件分支多且嵌套深，
v-if/v-else-if冗长难维护 - 开发函数式组件（无状态、纯渲染）、UI 组件库或高度可配置的容器（如表格列、表单生成器）
- 需精细控制 VNode 属性，比如手动合并 class/style 对象、处理 DOM 特性（
domProps）或事件 keyCode 判断
渲染函数的核心写法（以 h() 为主）
h() 是 Vue 3 的标准命名（Vue 2 中常叫 createElement），接收三个参数：
-
第一个参数：标签名（字符串）、组件选项对象、异步组件，甚至可为函数（如
() => this.level > 3 ? 'h3' : 'h4'） -
第二个参数：数据对象，整合了 props、attrs、class、style、on（事件）、ref、key 等。例如：
{ class: { active: this.isActive }, on: { click: this.handleClick } } -
第三个参数：子节点，支持字符串、数组（含多个 h() 调用）、插槽内容（
this.$slots.default）或文本节点
注意：render 函数必须返回且仅返回一个 VNode；若存在 render，Vue 会忽略 template 和 el 中的模板。
JSX 的实际用法与注意事项
JSX 让代码更直观，但不是“带指令的 HTML”：
- 不支持
v-model、v-show等指令，需手动映射为属性或事件（如v-model→value+onInput） - class 和 style 使用 JavaScript 对象语法：
class={{ active: isActive }}、style={{ color: textColor }} - 事件监听统一用
onXXX（如onClick），修饰符（.stop、.prevent）需在 handler 中调用event.stopPropagation()等 - 需正确配置 Babel 插件（如
@vue/babel-preset-jsx），并关闭自动注入h，避免与 render 函数冲突
性能与可维护性的平衡
不必迷信“手写渲染函数一定更快”。Vue 3 编译器对模板做了大量优化（静态提升、hoist 静态节点等），多数场景下编译后的性能优于手写。真正优势在于表达力和可控性：
- 复杂列表渲染中，map + h() 比嵌套
v-for+ 多层v-if更易读 - 权限控制组件可直接
h(this.role === 'admin' ? AdminView : UserView)，无需在模板里堆砌判断 - 插槽内容可被当作数据处理：过滤、包装、条件包裹，而不仅限于
<slot></slot>直出
不复杂但容易忽略：优先让逻辑清晰，再考虑是否用渲染函数；JSX 是锦上添花，不是必须项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
