Vue 的 render 函数深入原理 实战render 函数是 Vue 底层核心之一 ——模板的本质就是编译成 render 函数掌握它能彻底理解 Vue 视图渲染逻辑还能实现模板做不到的灵活组件。一、为什么要有 render 函数Vue 模板是「语法糖」最终会被编译器编译成 render 函数执行后生成 VNode虚拟 DOM再通过 patch 算法渲染成真实 DOM。模板适合大部分常规场景简单易上手render 函数适合动态性极高、逻辑复杂的组件如表单生成、动态标签比模板更灵活、更接近底层。二、核心概念VNode虚拟 DOM在讲 render 函数前必须先懂 VNode——用 JS 对象描述 DOM 节点的结构是 render 函数的返回值。极简 VNode 结构javascript运行const vnode {type: ‘div’, // 节点类型标签/组件/文本props: { class: ‘box’, onClick: handleClick }, // 属性/事件children: [ // 子节点{ type: ‘span’, children: ‘Hello Vue’ },h(‘button’, { onClick: () {} }, ‘点击’) // h函数创建VNode],el: null // 对应的真实DOM节点Vue内部挂载}Vue 内部通过 h() 函数hyperscript创建 VNodeh 是 createVNode 的别名。三、render 函数的基础用法最基础的 render 函数替代模板template!--模板写法--divclasscontainerclickhandleClickspan{{msg}}/spanbutton按钮/button/div/templatescript// render 函数等价写法exportdefault{data(){return{msg:Hello Render}},methods:{handleClick(){console.log(点击容器)}},render(h){// h是createVNode的参数Vue自动传入// h(标签/组件, 属性/事件, 子节点)returnh(div,{class:container,onClick:this.handleClick},[h(span,this.msg),// 文本子节点h(button,按钮)// 按钮子节点])}}/scriptVue 3 中的 render 函数Composition APIVue 3 中需手动导入 h 函数且 setup 函数返回的就是 render 逻辑script setupimport{h}fromvueconstmsgVue 3 Render// setup返回render函数return()h(div,{class:container},[h(span,msg),h(button,{onClick:()alert(点击)},Vue3按钮)])/script核心参数说明h 函数h(type, props, children)四、render 函数的高级场景模板做不到的事// 场景 1动态标签根据参数生成不同标签// 比如封装一个「通用文本组件」支持 level 参数控制是 h1/h2/h3scriptexportdefault{props:{level:{type:Number,default:1,validator:vv1v6},content:{type:String,required:true}},render(h){// 动态生成标签h1/h2/h3...returnh(h${this.level},{class:title},this.content)}}/script!--使用--templatemy-title level3content这是H3标题/my-title/template// 场景 2动态组件 作用域插槽// render 函数能更灵活地处理插槽尤其是作用域插槽scriptexportdefault{props:{list:{type:Array,default:()[]}},render(h){returnh(ul,this.list.map(item// 作用域插槽向插槽传递item数据h(li,this.$scopedSlots.default?this.$scopedSlots.default({item}):item.name)))}}/script!--使用--templatemy-list:list[{name: Vue}, {name: React}]template #defaultscopespan{{scope.item.name}}/span/template/my-list/template// 场景 3递归组件树形结构// render 函数实现递归组件如树形菜单比模板更简洁scriptexportdefault{name:Tree,// 必须命名用于递归调用props:{data:{type:Object,required:true}},render(h){constchildrenthis.data.childrenthis.data.children.length?this.data.children.map(childh(Tree,{props:{data:child}}))// 递归:[]returnh(div,[h(span,this.data.label),h(div,{class:children},children)])}}/script五、模板 vs render 函数 核心区别六、render 函数的底层执行流程1.组件挂载时Vue 执行 render 函数 → 返回 VNode 树2.Vue 调用 patch 方法将 VNode 转换为真实 DOM挂载到 el 上3.数据更新时重新执行 render 函数 → 生成新 VNode 树4.Vue 对比新旧 VNodediff 算法→ 只更新变化的 DOM 节点。七、关键注意事项1.避免直接操作 DOMrender 函数返回的是 VNodeVue 会自动处理 DOM 挂载不要在 render 中操作 el2.事件命名props 中事件需用小驼峰onClick而非模板中的短横线click3.Vue 3 兼容Vue 3 移除了 $createElement需手动导入 h 函数4.性能优化复杂 render 函数中可通过 memo 缓存 VNode避免重复渲染。总结1.render 函数是 Vue 模板的底层实现返回 VNode 描述视图结构2.h() 函数是创建 VNode 的核心参数为「类型、属性、子节点」3.模板适合常规场景render 函数适合动态性高、逻辑复杂的组件4.掌握 render 函数能理解 Vue 视图渲染的本质也是阅读 Vue 源码的基础。