Vue.js technology reveals learning (3) render

Vue the  _render method is an example of a private method, which is used to render a virtual instance of the Node, a return is VNode  

 

Vue described in official documents in  render function of the first parameter is  createElementthe example of that combination before:

<div id="app"> {{ message }} </div> 

We write the equivalent of the following  render function:

render: function (createElement) { return createElement('div', { attrs: { id: 'app' }, }, this.message) } 

Go back to  _render the function of the  render method call:

vnode = render.call(vm._renderProxy, vm.$createElement) 

You can see, render the function of  createElement the method is the  vm.$createElement method:

export function initRender (vm: Component) { // ... // bind the createElement fn to this instance // so that we get proper render context inside it. // args order: tag, data, children, normalizationType, alwaysNormalize // internal version is used by render functions compiled from templates vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) // normalization is always applied for the public version, used in // user-written render functions. vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) } 

In fact, the vm.$createElement method is defined in the execution  initRender of methods when you can see in addition to  vm.$createElement the method, there is a  vm._c method, it is compiled into a template  render function uses, and  vm.$createElement is the user's handwriting  render methods used, and maybe a way to support the same parameters, and the interior are called  createElement methods.

# Summary