Vue.js渲染函数是模板语法的底层替代方案，需避免复用vNode、手动处理v-model、显式调用插槽、注意响应式数据访问方式。
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 事件。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 例如实现一个带双向绑定的输入框：需同时设置
{ 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 的解包值。
- 组合式 API 中，若在
render()内访问ref，需用.value显式读取 - 计算属性应提前在
setup()中定义为computed(() => ...)，再传入渲染函数上下文 - 不要在
render()中直接修改响应式数据——它只负责描述视图，副作用应在其他地方处理
