Vue.prototype._init = function () {
    ...
    vm.$mount(vm.$options.el) // 实际上是调用了mountComponent方法
    ...
  }  

export function mountComponent (
 vm: Component,
 el: ?Element,
 hydrating?: boolean
): Component {
 // vm.$el为真实的node
 vm.$el = el
 // 如果vm上没有挂载render函数
 if (!vm.$options.render) {
  // 空节点
  vm.$options.render = createEmptyVNode
 }
 // 钩子函数
 callHook(vm, 'beforeMount')

 let updateComponent
 /* istanbul ignore if */
 if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  ...
 } else {
  // updateComponent为监听函数, new Watcher(vm, updateComponent, noop)
  updateComponent = () => {
   // Vue.prototype._render 渲染函数
   // vm._render() 返回一个VNode
   // 更新dom
   // vm._render()调用render函数，会返回一个VNode，在生成VNode的过程中，会动态计算getter,同时推入到dep里面
   vm._update(vm._render(), hydrating)
  }
 }

 // 新建一个_watcher对象
 // vm实例上挂载的_watcher主要是为了更新DOM
 // vm/expression/cb
 vm._watcher = new Watcher(vm, updateComponent, noop)
 hydrating = false

 // manually mounted instance, call mounted on self
 // mounted is called for render-created child components in its inserted hook
 if (vm.$vnode == null) {
  vm._isMounted = true
  callHook(vm, 'mounted')
 }
 return vm
}

vm._watcher = new Watcher(vm, updateComponent, noop)

updateComponent = () => {
 vm._update(vm._render(), hydrating)
}

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  const vm: Component = this
  if (vm._isMounted) {
   callHook(vm, 'beforeUpdate')
  }
  const prevEl = vm.$el
  const prevVnode = vm._vnode
  const prevActiveInstance = activeInstance
  activeInstance = vm
  // 新的vnode
  vm._vnode = vnode
  // Vue.prototype.__patch__ is injected in entry points
  // based on the rendering backend used.
  // 如果需要diff的prevVnode不存在，那么就用新的vnode创建一个真实dom节点
  if (!prevVnode) {
   // initial render
   // 第一个参数为真实的node节点
   vm.$el = vm.__patch__(
    vm.$el, vnode, hydrating, false /* removeOnly */,
    vm.$options._parentElm,
    vm.$options._refElm
   )
  } else {
   // updates
   // 如果需要diff的prevVnode存在，那么首先对prevVnode和vnode进行diff,并将需要的更新的dom操作已patch的形式打到prevVnode上，并完成真实dom的更新工作
   vm.$el = vm.__patch__(prevVnode, vnode)
  }
  activeInstance = prevActiveInstance
  // 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
  }
}

  function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
    // 当oldVnode不存在时
    if (isUndef(oldVnode)) {
      // 创建新的节点
      createElm(vnode, insertedVnodeQueue, parentElm, refElm)
    } else {
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
      // patch existing root node
      // 对oldVnode和vnode进行diff，并对oldVnode打patch
      patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
   } 
    }
  }

function sameVnode (a, b) {
 return (
  a.key === b.key &&
  a.tag === b.tag &&
  a.isComment === b.isComment &&
  isDef(a.data) === isDef(b.data) &&
  sameInputType(a, b)
 )
}

constructor (
  tag?: string,
  data?: VNodeData,     // 关于这个节点的data值，包括attrs,style,hook等
  children?: ?Array<VNode>, // 子vdom节点
  text?: string,    // 文本内容
  elm?: Node,      // 真实的dom节点
  context?: Component, // 创建这个vdom的上下文
  componentOptions?: VNodeComponentOptions
 ) {
  this.tag = tag
  this.data = data
  this.children = children
  this.text = text
  this.elm = elm
  this.ns = undefined
  this.context = context
  this.functionalContext = undefined
  this.key = data && data.key
  this.componentOptions = componentOptions
  this.componentInstance = undefined
  this.parent = undefined
  this.raw = false
  this.isStatic = false
  this.isRootInsert = true
  this.isComment = false
  this.isCloned = false
  this.isOnce = false
 }

 // DEPRECATED: alias for componentInstance for backwards compat.
 /* istanbul ignore next */
 get child (): Component | void {
  return this.componentInstance
 }
}

  {
    tag: 'div'
    data: {
      id: 'app',
      class: 'page-box'
    },
    children: [
      {
        tag: 'p',
        text: 'this is demo'
      }
    ]
  }

  <div id="app" class="page-box">
    <p>this is demo</p>
  </div>

function patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly) {
  ...
}

if (isDef(data) && isPatchable(vnode)) {
   // cbs保存了hooks钩子函数: 'create', 'activate', 'update', 'remove', 'destroy'
   // 取出cbs保存的update钩子函数，依次调用，更新attrs/style/class/events/directives/refs等属性
   for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
   if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
  }

  ...
  const elm = vnode.elm = oldVnode.elm
  const oldCh = oldVnode.children
  const ch = vnode.children
  // 如果vnode没有文本节点
  if (isUndef(vnode.text)) {
   // 如果oldVnode的children属性存在且vnode的属性也存在
   if (isDef(oldCh) && isDef(ch)) {
    // updateChildren，对子节点进行diff
    if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
   } else if (isDef(ch)) {
    // 如果oldVnode的text存在，那么首先清空text的内容
    if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
    // 然后将vnode的children添加进去
    addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
   } else if (isDef(oldCh)) {
    // 删除elm下的oldchildren
    removeVnodes(elm, oldCh, 0, oldCh.length - 1)
   } else if (isDef(oldVnode.text)) {
    // oldVnode有子节点，而vnode没有，那么就清空这个节点
    nodeOps.setTextContent(elm, '')
   }
  } else if (oldVnode.text !== vnode.text) {
   // 如果oldVnode和vnode文本属性不同，那么直接更新真是dom节点的文本元素
   nodeOps.setTextContent(elm, vnode.text)
  }

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  // 为oldCh和newCh分别建立索引，为之后遍历的依据
  let oldStartIdx = 0
  let newStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let oldStartVnode = oldCh[0]
  let oldEndVnode = oldCh[oldEndIdx]
  let newEndIdx = newCh.length - 1
  let newStartVnode = newCh[0]
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx, idxInOld, elmToMove, refElm
  
  // 直到oldCh或者newCh被遍历完后跳出循环
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
   if (isUndef(oldStartVnode)) {
    oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
   } else if (isUndef(oldEndVnode)) {
    oldEndVnode = oldCh[--oldEndIdx]
   } else if (sameVnode(oldStartVnode, newStartVnode)) {
    patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
    oldStartVnode = oldCh[++oldStartIdx]
    newStartVnode = newCh[++newStartIdx]
   } else if (sameVnode(oldEndVnode, newEndVnode)) {
    patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
    oldEndVnode = oldCh[--oldEndIdx]
    newEndVnode = newCh[--newEndIdx]
   } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
    patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
    oldStartVnode = oldCh[++oldStartIdx]
    newEndVnode = newCh[--newEndIdx]
   } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
    patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
    // 插入到老的开始节点的前面
    canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
    oldEndVnode = oldCh[--oldEndIdx]
    newStartVnode = newCh[++newStartIdx]
   } else {
    // 如果以上条件都不满足，那么这个时候开始比较key值，首先建立key和index索引的对应关系
    if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
    idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null
    // 如果idxInOld不存在
    // 1. newStartVnode上存在这个key,但是oldKeyToIdx中不存在
    // 2. newStartVnode上并没有设置key属性
    if (isUndef(idxInOld)) { // New element
     // 创建新的dom节点
     // 插入到oldStartVnode.elm前面
     // 参见createElm方法
     createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
     newStartVnode = newCh[++newStartIdx]
    } else {
     elmToMove = oldCh[idxInOld]
     /* istanbul ignore if */
     if (process.env.NODE_ENV !== 'production' && !elmToMove) {
      warn(
       'It seems there are duplicate keys that is causing an update error. ' +
       'Make sure each v-for item has a unique key.'
      )
     
     // 将找到的key一致的oldVnode再和newStartVnode进行diff
     if (sameVnode(elmToMove, newStartVnode)) {
      patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
      oldCh[idxInOld] = undefined
      // 移动node节点
      canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
      newStartVnode = newCh[++newStartIdx]
     } else {
      // same key but different element. treat as new element
      // 创建新的dom节点
      createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
      newStartVnode = newCh[++newStartIdx]
     }
    }
   }
  }
  // 如果最后遍历的oldStartIdx大于oldEndIdx的话
  if (oldStartIdx > oldEndIdx) {    // 如果是老的vdom先被遍历完
   refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
   // 添加newVnode中剩余的节点到parentElm中
   addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  } else if (newStartIdx > newEndIdx) { // 如果是新的vdom先被遍历完，则删除oldVnode里面所有的节点
   // 删除剩余的节点
   removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
  }
}

if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null

if (isUndef(idxInOld)) { // New element
  // 创建新的dom节点
  // 插入到oldStartVnode.elm前面
  // 参见createElm方法
  createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
     newStartVnode = newCh[++newStartIdx]
    } 

elmToMove = oldCh[idxInOld]
     /* istanbul ignore if */
     if (process.env.NODE_ENV !== 'production' && !elmToMove) {
     
     // 将找到的key一致的oldVnode再和newStartVnode进行diff
     if (sameVnode(elmToMove, newStartVnode)) {
      patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
      // 清空这个节点
      oldCh[idxInOld] = undefined
      // 移动node节点
      canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
      newStartVnode = newCh[++newStartIdx]
     } else {
      // same key but different element. treat as new element
      // 创建新的dom节点
      createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
      newStartVnode = newCh[++newStartIdx]
     }