vue源码讲解系列之三------ 首次渲染/数据更新的时候_update方法将VNode渲染成真实DOM的过程

上一篇我们了解了render过程中调用的createElement方法和VNode虚拟节点。createElement对_createElement进行了封装，而_createElement则是真正处理render过程的函数，VNode类则定义了许多虚拟节点需要的字段，VNode构成节点树，再映射成真实DOM。那么接下来我们来了解VNode渲染成真实DOM的过程。

当我们创建Vue实例，在data里添加一些初始参数后，界面渲染的时候会调用_update方法。我们首先找到src/core/instance/lifecycle.js文件，可以看到lifecycleMixin方法，该方法中有_update、$forceUpdate、$destroy三个方法。先看_update方法：

  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const restoreActiveInstance = setActiveInstance(vm)
    vm._vnode = vnode
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    if (!prevVnode) {
      // initial render
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    restoreActiveInstance()
    // update __vue__ reference
    if (prevEl) {
      prevEl.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    // if parent is an HOC, update its $el as well
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    }
    // updated hook is called by the scheduler to ensure that children are
    // updated in a parent's updated hook.
  }

_update调用了__patch__方法，__patch__方法有许多环境的判断，比如app和web，服务端和非服务端。这里我们讲app端。我们构建实例的时候：

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

message值Hello Vue!会被渲染在id为app的div元素文本，此时触发_update。vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)，参数vm.$el对应id为app的DOM元素，vnode是之前render函数的返回值，hydrating在非服务端渲染的情况下为false，removeOnly为false。
接下来看__patch__函数的执行关键过程（patch.js）：

const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
      } else {
        if (isRealElement) {
          // mounting to a real element
          // check if this is server-rendered content and if we can perform
          // a successful hydration.
          if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
            oldVnode.removeAttribute(SSR_ATTR)
            hydrating = true
          }
          if (isTrue(hydrating)) {
            if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
              invokeInsertHook(vnode, insertedVnodeQueue, true)
              return oldVnode
            } else if (process.env.NODE_ENV !== 'production') {
              warn(
                'The client-side rendered virtual DOM tree is not matching ' +
                'server-rendered content. This is likely caused by incorrect ' +
                'HTML markup, for example nesting block-level elements inside ' +
                '
, or missing . Bailing hydration and performing ' +
                'full client-side render.'
              )
            }
          }
          // either not server-rendered, or hydration failed.
          // create an empty node and replace it
          oldVnode = emptyNodeAt(oldVnode)
        }

        // replacing existing element
        const oldElm = oldVnode.elm
        const parentElm = nodeOps.parentNode(oldElm)

        // create new node
        createElm(
          vnode,
          insertedVnodeQueue,
          // extremely rare edge case: do not insert if old element is in a
          // leaving transition. Only happens when combining transition +
          // keep-alive + HOCs. (#4590)
          oldElm._leaveCb ? null : parentElm,
          nodeOps.nextSibling(oldElm)
        )
      }

由于我们传入的oldVnode是一个DOM容器，所以isRealElement为true，接下来通过emptyNodeAt方法把oldVnode转换成VNode对象，然后再调用createElm方法：

  function createElm (
    vnode,
    insertedVnodeQueue,
    parentElm,
    refElm,
    nested,
    ownerArray,
    index
  ) {
    if (isDef(vnode.elm) && isDef(ownerArray)) {
      // This vnode was used in a previous render!
      // now it's used as a new node, overwriting its elm would cause
      // potential patch errors down the road when it's used as an insertion
      // reference node. Instead, we clone the node on-demand before creating
      // associated DOM element for it.
      vnode = ownerArray[index] = cloneVNode(vnode)
    }

    vnode.isRootInsert = !nested // for transition enter check
    if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
      return
    }

    const data = vnode.data
    const children = vnode.children
    const tag = vnode.tag
    if (isDef(tag)) {
      if (process.env.NODE_ENV !== 'production') {
        if (data && data.pre) {
          creatingElmInVPre++
        }
        if (isUnknownElement(vnode, creatingElmInVPre)) {
          warn(
            'Unknown custom element: <' + tag + '> - did you ' +
            'register the component correctly? For recursive components, ' +
            'make sure to provide the "name" option.',
            vnode.context
          )
        }
      }

      vnode.elm = vnode.ns
        ? nodeOps.createElementNS(vnode.ns, tag)
        : nodeOps.createElement(tag, vnode)
      setScope(vnode)

      /* istanbul ignore if */
      if (__WEEX__) {
        // in Weex, the default insertion order is parent-first.
        // List items can be optimized to use children-first insertion
        // with append="tree".
        const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
        if (!appendAsTree) {
          if (isDef(data)) {
            invokeCreateHooks(vnode, insertedVnodeQueue)
          }
          insert(parentElm, vnode.elm, refElm)
        }
        createChildren(vnode, children, insertedVnodeQueue)
        if (appendAsTree) {
          if (isDef(data)) {
            invokeCreateHooks(vnode, insertedVnodeQueue)
          }
          insert(parentElm, vnode.elm, refElm)
        }
      } else {
        createChildren(vnode, children, insertedVnodeQueue)
        if (isDef(data)) {
          invokeCreateHooks(vnode, insertedVnodeQueue)
        }
        insert(parentElm, vnode.elm, refElm)
      }

      if (process.env.NODE_ENV !== 'production' && data && data.pre) {
        creatingElmInVPre--
      }
    } else if (isTrue(vnode.isComment)) {
      vnode.elm = nodeOps.createComment(vnode.text)
      insert(parentElm, vnode.elm, refElm)
    } else {
      vnode.elm = nodeOps.createTextNode(vnode.text)
      insert(parentElm, vnode.elm, refElm)
    }
  }

createElm的作用是通过虚拟节点创建真实的DOM并插入到他们的父节点中。
createComponent方法目的是尝试创建子组件，判断vnode是否含有tag，如果有则在非生产环境校验tag是否是一个合法标签，然后再调用平台的DOM操作去创建一个占位符元素:

vnode.elm = vnode.ns
        ? nodeOps.createElementNS(vnode.ns, tag)
        : nodeOps.createElement(tag, vnode)

接下来调用createChildren创建子元素：

 createChildren(vnode, children, insertedVnodeQueue)

 function createChildren (vnode, children, insertedVnodeQueue) {
    if (Array.isArray(children)) {
      if (process.env.NODE_ENV !== 'production') {
        checkDuplicateKeys(children)
      }
      for (let i = 0; i < children.length; ++i) {
        createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i)
      }
    } else if (isPrimitive(vnode.text)) {
      nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))
    }
  }

createChildren遍历子虚拟节点，递归调用createElm，这是一种深度优先遍历算法，遍历过程中会把vnode.elm作为父容器的DOM节点占位符传入。
调用invokeCreateHooks执行所有的create的钩子并把vnode push到insertedVnodeQueue中：

if (isDef(data)) {
            invokeCreateHooks(vnode, insertedVnodeQueue)
          }

  function invokeCreateHooks (vnode, insertedVnodeQueue) {
    for (let i = 0; i < cbs.create.length; ++i) {
      cbs.create[i](emptyNode, vnode)
    }
    i = vnode.data.hook // Reuse variable
    if (isDef(i)) {
      if (isDef(i.create)) i.create(emptyNode, vnode)
      if (isDef(i.insert)) insertedVnodeQueue.push(vnode)
    }
  }

最后调用insert方法把DOM插入到父节点中，因为是递归调用子元素会优先调用insert，所以整个vnode树节点的插入顺序是先子后父。
src/core/vdom/patch.js中的insert：

  function insert (parent, elm, ref) {
    if (isDef(parent)) {
      if (isDef(ref)) {
        if (nodeOps.parentNode(ref) === parent) {
          nodeOps.insertBefore(parent, elm, ref)
        }
      } else {
        nodeOps.appendChild(parent, elm)
      }
    }
  }

insert调用nodeOps把子节点插入到父节点中：

export function insertBefore (parentNode: Node, newNode: Node, referenceNode: Node) {
  parentNode.insertBefore(newNode, referenceNode)
}

export function appendChild (node: Node, child: Node) {
  node.appendChild(child)
}

insertBefore和appendChild实际上又是调用了原生DOM方法。

在 createElm 过程中，如果 vnode 节点如果不包含 tag，则它有可能是一个注释或者纯文本节点，可以直接插入到父元素中。

在我们这个例子中：

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

最内层就是一个文本 vnode，它的 text 值取的就是例子中的 this.message 值 Hello Vue!。

再回到 patch 方法，首次渲染我们调用了 createElm 方法，传入的 parentElm参数 是 oldVnode.elm 的父元素， 在我们的例子里是 id 为 #app div 的父元素，也就是 Body；实际上整个过程就是递归创建了一个完整的 DOM 树并插入到 Body 上。

递归 createElm 生成的 vnode 插入顺序队列，会执行相关的 insert 钩子函数。