vue渲染函数是用javascript直接生成vnode的方式，绕过模板编译，适用于动态标签、复杂条件逻辑、高复用封装及性能敏感场景，如标题组件、表单生成器等。
Vue 渲染函数是用 JavaScript 直接生成虚拟节点（VNode）的方式，它绕过模板编译阶段，让你在运行时完全控制组件结构。适合动态标签、条件逻辑复杂、高复用封装或性能敏感的场景——比如标题组件、表单生成器、动态布局容器。
什么时候该用 render 函数
不是所有组件都需要它。模板更直观、易维护、有 IDE 支持；render 函数则在以下情况真正有用：
- 需要根据 prop 动态决定 HTML 标签名（如 h1 到 h6）
- 要批量生成结构相似但类型不同的子组件（如表格列、表单项）
- 需精细控制 slot 分发、作用域插槽组合或嵌套渲染逻辑
- 构建高度抽象的“元组件”，比如容器类组件、包装器（wrapper）、高阶组件（HOC）
- 与 JSX 配合使用，提升逻辑表达力（尤其在 TypeScript 项目中）
Vue 3 中的基本写法
Vue 3 的 render 函数不再自动注入 h，需显式导入。它是一个返回 VNode 的函数，通常写在 setup() 的返回值中：
import { h, defineComponent } from 'vue'
export default defineComponent({
props: { level: { type: Number, required: true } },
setup(props) {
return () => h(`h${props.level}`, props.$slots.default?.())
}
})
注意：必须返回一个函数（而非直接返回 h() 结果），否则响应式更新不会触发重渲染。
常用参数与结构技巧
h() 接收三个参数：标签名（字符串/组件/函数）、属性对象（props + 事件 + class/style）、子节点（字符串 / VNode / VNode 数组）。关键细节：
- 事件监听用 onXxx 形式，如 onClick、onInput
- class 和 style 支持数组或对象，和模板中一致：class: ['a', { b: isB }]
- 子节点可为字符串、h() 调用结果、或混合数组：['文本', h('span', '高亮')]
- VNode 必须唯一，避免重复引用同一对象；列表渲染务必加 key
- 插槽内容通过 props.$slots.xxx() 调用获取（函数式调用，不是属性）
和模板、JSX 的关系
三者最终都产出 VNode，只是语法层级不同：
- 模板：声明式、编译时处理，适合静态结构和常规交互
- render 函数：命令式、运行时执行，适合动态逻辑强、复用粒度细的场景
- JSX：语法糖，本质仍是调用 h()；适合习惯 React 风格、需嵌入复杂 JS 表达式的团队
JSX 不是必需项，但配合 Babel 插件后，可写出更接近原生 JS 的结构，例如：{condition && yes}。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
