vue.js 渲染函数通过 h() 直接创建 vnode，实现动态组件切换、插槽透传与结构定制；支持字符串标签、组件引用、配置对象及嵌套子节点，需确保组件可用并避免副作用。
Vue.js 中，渲染函数（render function）是绕过模板、用 JavaScript 直接描述虚拟 DOM 的核心机制。它不依赖 HTML 字符串，而是通过 h() 函数（即 createElement）生成 VNode，从而实现对渲染逻辑的完全动态控制——比如根据状态切换组件、条件拼接结构、运行时决定标签类型或属性，甚至透传插槽与事件。
用 h() 创建基础 VNode
render 函数接收 h 作为第一个参数，它是创建虚拟节点的工厂函数。基本调用形式为：h(标签名/组件, 配置对象, 子节点)。
- 标签名可以是字符串（如 'div'、'span'），也可以是已注册的组件或导入的组件选项对象
- 配置对象支持 props（对应 v-bind）、on（对应 v-on）、class、style、ref 等字段
- 子节点可以是字符串、VNode 数组，或由 h() 递归生成的嵌套结构
动态决定渲染什么组件
当需要根据数据实时切换不同组件时，直接把组件引用传给 h() 即可，无需 <component :is="..."></component> 模板写法。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章