vue源码讲解系列之四------在render中创建节点和使用组件发生了什么

上一篇我们了解了创建vue实例时调用了_update方法，_update又调用了实例上的__patch__方法，它接收DOM元素、vnode、hydrating和removeOnly这几个参数。createChildren递归调用createElm创建真实DOM，最后使用原生appendChild方法将节点插入到DOM树中。接下来我们来了解vue组件化的过程。

通过组件化的思想，我们可以将界面拆分为多个独立的模块，可以复用和嵌套使用。

上一篇我们了解到了在render函数中直接创建节点的方法：

var app = new Vue({
   
  el: '#app',
  render:function(createElement){
   
      return createElement('div',{
   
          attrs:{
   
              id:'app'
          }
      },this.message)
  },
  data: {
   
    message: 'Hello Vue!'
  }
})

通过判断是真实节点还是虚拟节点，来渲染元素。上述是创建了一个真实节点(isRealElement=true)，所以render会走createElm方法，我们可以在测试文件里将以上代码打上断点，看vuejs运行流程：createElement->_createElement->createElm->VNode

function createElement (
//...
): VNode | Array<VNode> {