render函数

render函数

render函数是Vue提供的、能直接用JavaScript操作虚拟DOM的核心入口；日常写的template模板里的HTML结构，Vue会自动编译成render函数，再执行生成虚拟DOM节点，最终渲染为真实DOM。

手动编写render函数，会省去Vue的模板编译步骤，直接通过JS生成虚拟DOM并渲染成真实DOM，更灵活也更高效；render函数的核心是createElement（常简写h）方法，调用该方法可根据配置的参数创建并返回对应的虚拟DOM节点（VNode），render函数最终会把这个VNode返回给Vue，由Vue完成后续的真实DOM渲染工作。

createElement是render函数内创建虚拟节点的核心工具，通过配置它的三个核心参数，能实现原生标签/自定义组件的创建、标签属性与事件的绑定、子节点/内部内容的嵌套，多个节点可通过容器节点包裹、以数组形式作为子节点实现批量创建，满足复杂DOM结构的渲染需求。

首先，Vue里所有模板语法，底层最终都会被编译成render函数，执行后生成VNode，再渲染成真实DOM，模板只是给咱们用的快捷语法糖，render才是底层核心。

然后，核心的createElement（简写h）函数，三个参数是关键：第一个参数是要创建的节点，原生标签写标签名字符串，自定义组件直接传组件名；第二个参数是配置对象，标签上的所有属性、事件都在这配，比如给原生标签绑属性用domProps，绑事件用on，给自定义组件传props就直接写props配置项；第三个参数是标签内部的内容或子节点，容器标签的文本、子标签放这，自闭合的比如input，不用传第三个参数。

接下来，render函数里实现常见功能的核心写法：做条件渲染就用JS的if/else，循环渲染就用数组的map方法，遍历生成节点；实现双向绑定的话，就是给input用domProps绑定value值，再用on绑定input事件，通过$emit派发input事件把最新值传给父组件，这就是v-model的底层逻辑。

还有几个关键细节：配置对象里的on是专门绑定事件的，不管原生标签还是组件的事件，都在这写；render函数里的this指向组件实例，但普通事件回调里this会丢失，要提前存self = this；另外，组件的props只是接收父组件的值，要展示在原生标签上，得用domProps把值赋给原生属性。

最后，render函数的使用场景：日常95%的业务用模板就够了，直观又快，只有遇到模板搞不定的情况，比如动态渲染不同组件、写高阶组件、做自定义渲染逻辑，才需要手写render函数，它是进阶技能，不用急着吃透。

另外，区分两个容易混的点：给自定义组件传参用配置里的props项，给原生DOM标签设属性用domProps项；createElement第二个参数是标签上的配置，第三个是标签内部的内容，别搞反了。