Vue.js 渲染函数编写中的最佳实践与常见误区-Vue.js-PHP中文网

Vue.js渲染函数是模板语法的底层替代方案，需避免复用vNode、手动处理v-model、显式调用插槽、注意响应式数据访问方式。

vue.js 渲染函数编写中的最佳实践与常见误区

Vue.js 渲染函数是模板语法的底层替代方案，适合需要高度动态性、精细控制或跨平台能力的场景。它不是为日常开发设计的“快捷方式”，而是一种更底层、更灵活的渲染表达方式。用得好能提升可维护性和性能，用得不当则容易引发响应失效、vNode重复、插槽丢失等问题。

避免直接复用 vNode 对象

vNode 必须唯一。同一个 vNode 实例不能在多个位置被重复使用，否则 Vue 会跳过更新或渲染异常，且不报错。

错误做法：把 h('div', 'text') 存入变量后多次传入子节点数组
正确做法：每次调用 h() 都生成新 vNode；若逻辑复杂，可封装为返回 vNode 的函数，而非返回 vNode 实例本身
特别注意：this.$slots.default 是只读的插槽内容数组，直接透传即可；但若需过滤或包装，必须 map 后返回新 vNode 数组

手动处理 v-model 与事件绑定

模板中 v-model 是语法糖，渲染函数中不会自动展开。它等价于显式传递 modelValue prop 和监听 onUpdate:modelValue 事件。

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

例如实现一个带双向绑定的输入框：需同时设置 { props: { modelValue: this.value } } 和 { on: { 'onUpdate:modelValue': (val) => this.value = val } }
事件名要严格匹配：Vue 3 中使用驼峰式事件名（如 onUpdate:modelValue），不是 update:modelValue
原生事件（如 @click）对应 on: { click: handler }；自定义事件需按组件 emit 的名称注册

正确分发插槽与作用域插槽

渲染函数中插槽不是自动注入的，必须显式调用并透传。默认插槽、具名插槽、作用域插槽的访问方式不同。

this.$slots.default?.() 返回 vNode 数组，需解包使用；空插槽返回 undefined，建议加可选链
具名插槽如 this.$slots.header?.()，同样需调用执行
作用域插槽（如 item 插槽）需传参：this.$slots.item?.({ item: this.currentItem })
不要把插槽函数直接当子节点传给 h()；必须调用它，拿到 vNode 后再组合

注意响应式数据的访问方式

在选项式 API 中，this.xxx 可直接访问 data、props、computed；但在组合式 API 的 setup() 中，渲染函数需通过 render: (ctx) => {...} 形式定义，此时 ctx 是 proxy 对象，包含 props、slots、emit 等，但不包含 ref 或 reactive 的解包值。