vue 渲染函数和 jsx 本质都是生成 vnode，渲染函数是纯 javascript 的底层实现，jsx 是其语法糖；前者零配置、灵活精细，后者写法类 html、需构建工具支持，二者可混合使用。
Vue 渲染函数和 JSX 都是用来替代模板、更灵活地控制组件渲染的方式，本质都是生成虚拟节点（VNode），但写法和适用场景有明显区别。
渲染函数：纯 JavaScript 的 VNode 构建方式
渲染函数是 Vue 底层的渲染机制，通过 h() 函数手动创建虚拟节点。它不依赖编译器，直接在运行时生成 VNode，适合需要精细控制或逻辑复杂的场景。
-
基本结构：组件选项中定义
render(h)，返回一个h()调用结果；h()第一个参数必填（标签名、组件引用或函数），后两个参数（props 对象、子节点）可选 -
动态能力突出：能直接使用 if/else、for 循环、三元表达式、函数调用等 JS 逻辑组织结构，比如根据
this.level渲染h1～h6 -
插槽访问自然：通过
this.$slots.default或命名插槽对象获取内容，无需额外指令包装 - 注意点：返回值必须是单个 VNode（或字符串、数组），不能是 undefined；多个子节点需用数组包裹；VNode 必须唯一，不能重复引用同一节点
JSX：更接近 HTML 的语法糖
JSX 不是 Vue 原生语法，而是借助 Babel 或 Vite 插件（如 @vitejs/plugin-vue-jsx）转译为 h() 调用的语法扩展。它保留了渲染函数的全部能力，但写法更直观。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
-
写法更简洁：支持内联表达式，例如
{this.isLoggedIn ? <userpanel></userpanel> : <loginbox></loginbox>}，避免多层h()嵌套 -
属性书写习惯贴近模板：class、style 可用对象或数组写法；事件用
onClick而非v-on:click；绑定 prop 直接用msg={this.message} - TypeScript 支持友好：JSX 元素类型推断完整，配合 Vue 类型定义可获得准确的 props 和事件提示
-
需配置构建工具：Vue 3 项目中需安装并启用 JSX 插件，否则无法识别
<div></div>这类语法
什么时候该用哪个？
没有绝对优劣，关键看团队习惯与项目需求。
- 逻辑简单、团队熟悉模板 —— 优先用模板，开发快、易维护
- 需要高度动态结构（如表头列配置、权限路由组件、函数式弹窗）—— 渲染函数或 JSX 更合适
- 已有 React 经验或重度 TypeScript 项目 —— JSX 上手更快、类型检查更稳
- 追求最小依赖、避免额外编译步骤 —— 渲染函数更轻量，零配置即可用
它们不是互斥的
JSX 最终会被编译成渲染函数调用，两者共享同一套 VNode 规则。你可以在同一个项目里混合使用：核心业务组件用模板，高动态模块用 JSX，底层工具组件用纯渲染函数。只要最终产出合法 VNode，Vue 渲染器都能处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
