template => render

template

  1. <div id="app">
  2. {{ message }}
  3. </div>

render

  1. render: function(createElement){
  2. return createElement('div', {
  3. attrs: {
  4. id: 'app',
  5. },
  6. }, this.message)
  7. }
  1. // bind the createElement fn to this instance
  2. // so that we get proper render context inside it.
  3. // args order: tag, data, children, normalizationType, alwaysNormalize
  4. // internal version is used by render functions compiled from templates
  5. vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  6. // normalization is always applied for the public version, used in
  7. // user-written render functions.
  8. vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
  9. // $attrs & $listeners are exposed for easier HOC creation.
  10. // they need to be reactive so that HOCs using them are always updated

vm._c,这个方法是在template编译成render函数时使用
vm.$createElement是用户手写render方法使用的。

总结

vm.render最终都是执行createElement方法返回vnode(虚拟Node)。2.0的一个显著的特点就是Virtual DOM。