// 负责更新组件
updateComponent = () => {
  // 执行 _update 进入更新阶段，首先会执行 _render，将组件变成 VNode 
  vm._update(vm._render(), hydrating)
}
复制代码

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  ...
  callHook(vm, 'beforeMount')
  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
     ...
    }
  } else {
    // 负责更新组件
    updateComponent = () => {
      // 执行 _update 进入更新阶段，首先会执行 _render，将组件变成 VNode 
      vm._update(vm._render(), hydrating)
    }
  }
  ...
 if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}
复制代码

// 组件初始化渲染和更新时的入口
  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.
    // prevVnode 不存在，代表是初始化渲染
    if (!prevVnode) {
      // patch 阶段：patch、diff 算法
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
       // prevVnode 存在，代表是后续更新阶段
      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.
  }
复制代码

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop
复制代码

export const patch: Function = createPatchFunction({ nodeOps, modules })
复制代码

/**
 * web 平台的 DOM 操作 API
 */
// 创建标签名为 tagName 的元素节点
export function createElement (tagName: string, vnode: VNode): Element {
  // 创建元素
  const elm = document.createElement(tagName)
  // 非 select 元素直接返回
  if (tagName !== 'select') {
    return elm
  }
  // false or null will remove the attribute but undefined will not
  // 如果是 select 元素，则为它设置 multiple 属性
  if (vnode.data && vnode.data.attrs && vnode.data.attrs.multiple !== undefined) {
    elm.setAttribute('multiple', 'multiple')
  }
  return elm
}
// 创建带命名空间的元素节点
export function createElementNS (namespace: string, tagName: string): Element {
  return document.createElementNS(namespaceMap[namespace], tagName)
}
// 创建文本节点
export function createTextNode (text: string): Text {
  return document.createTextNode(text)
}
// 创建注释节点
export function createComment (text: string): Comment {
  return document.createComment(text)
}
// 在指定节点前插入节点
export function insertBefore (parentNode: Node, newNode: Node, referenceNode: Node) {
  parentNode.insertBefore(newNode, referenceNode)
}
// 移除子节点
export function removeChild (node: Node, child: Node) {
  node.removeChild(child)
}
// 添加子节点
export function appendChild (node: Node, child: Node) {
  node.appendChild(child)
}
// 返回指定节点的父节点
export function parentNode (node: Node): ?Node {
  return node.parentNode
}
// 返回指定节点的下一个兄弟节点
export function nextSibling (node: Node): ?Node {
  return node.nextSibling
}
// 返回指定节点的标签名 
export function tagName (node: Element): string {
  return node.tagName
}
// 为指定节点设置文本
export function setTextContent (node: Node, text: string) {
  node.textContent = text
}
// 为节点设置指定的 scopeId 属性，属性值为 ''，如 <div scopeId></div>
export function setStyleScope (node: Element, scopeId: string) {
  node.setAttribute(scopeId, '')
}
复制代码

import baseModules from 'core/vdom/modules/index'
import platformModules from 'web/runtime/modules/index'
/*
  指令模块应在应用所有内置模块后最后应用
  the directive module should be applied last, 
  after all built-in modules have been applied.
*/ 
const modules = platformModules.concat(baseModules)
复制代码

const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
/* 
  工厂函数：
     注入平台特有的一些功能操作，并定义一些方法，然后返回 patch 函数 
*/ 
export function createPatchFunction (backend) {
  let i, j
  const cbs = {}
  /*
    modules: { ref, directives, 平台特有的一些操纵，比如 attr、class、style 等 }
    nodeOps: { 对元素的增删改查 API }
  */
  const { modules, nodeOps } = backend
  /*
    hooks = ['create', 'activate', 'update', 'remove', 'destroy']
    遍历这些钩子，然后从 modules 的各个模块中找到相应的方法，
    比如：directives 中的 create、update、destroy 方法
    让这些方法放到 cbs[hook] = [hook 方法] 中，比如: cb.create = [fn1, fn2, ...]
    然后在合适的时间调用相应的钩子方法完成对应的操作
  */
  for (i = 0; i < hooks.length; ++i) {
    // 比如 cbs.create = []
    cbs[hooks[i]] = []
    for (j = 0; j < modules.length; ++j) {
      if (isDef(modules[j][hooks[i]])) {
        // 遍历各个 modules，找出各个 module 中的 create 方法，然后添加到 cbs.create 数组中
        cbs[hooks[i]].push(modules[j][hooks[i]])
      }
    }
  }
 ...
  /*
    vm.__patch__
      1、新节点不存在，老节点存在，调用 destroy，销毁老节点
      2、如果 oldVnode 是真实元素，则表示首次渲染，创建新节点，并插入 body，然后移除老节点
      3、如果 oldVnode 不是真实元素，则表示更新阶段，执行 patchVnode
  */
 return function patch (oldVnode, vnode, hydrating, removeOnly){
  ...
 }
}
复制代码

/*
    vm.__patch__
      1、新节点不存在，老节点存在，调用 destroy，销毁老节点
      2、如果 oldVnode 是真实元素，则表示首次渲染，创建新节点，并插入 body，然后移除老节点
      3、如果 oldVnode 不是真实元素，则表示更新阶段，执行 patchVnode
  */
  function patch(oldVnode, vnode, hydrating, removeOnly) {
    // 新节点不存在，老节点存在，则调用 destroy，销毁老节点
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }
    let isInitialPatch = false
    const insertedVnodeQueue = []
    // 老的 VNode 不存在
    if (isUndef(oldVnode)) {
      /*
        老的 VNode 不存在，新的 VNode 存在，这种情况会在一个组件初次渲染的时候出现，
        比如：<div id="app">
                <comp></comp>
              </div>
        这里的 comp 组件初次渲染时就会走这儿
        empty mount (likely as component), create new root element
      */
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue)
    } else {
      // 老的 VNode 存在
      // 判断老的 VNode 是否是一个真实的 dom 节点
      const isRealElement = isDef(oldVnode.nodeType)
      /*
        老的 VNode 不是真实元素，但是老节点和新节点是同一个节点，
        则属于更新阶段，需要执行 patch 更新节点
        patch existing root node
      */
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
      } else {
        // 老的 VNode 是真实元素
        if (isRealElement) {
          /* 
            挂载到真实元素以及处理服务端渲染的情况
            oldVnode.nodeType === 1 代表的是 html 元素
          */
          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 ' +
                '<p>, or missing <tbody>. Bailing hydration and performing ' +
                'full client-side render.'
              )
            }
          }
          /*
           走到这儿说明不是服务端渲染，或者 hydration 失败，
           则根据 oldVnode 创建一个 vnode 节点替换 oldVnode
          */ 
          oldVnode = emptyNodeAt(oldVnode)
        }
        // replacing existing element
        // 获取老节点的真实元素
        const oldElm = oldVnode.elm
        // 获取老节点的父元素，即 body 元素
        const parentElm = nodeOps.parentNode(oldElm)
        // 基于新 vnode 创建整棵 DOM 树并插入到 body 元素下
        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)
        )
        // 递归更新父占位符节点元素
        // update parent placeholder node element, recursively
        if (isDef(vnode.parent)) {
          let ancestor = vnode.parent
          const patchable = isPatchable(vnode)
          while (ancestor) {
            for (let i = 0; i < cbs.destroy.length; ++i) {
              cbs.destroy[i](ancestor)
            }
            ancestor.elm = vnode.elm
            if (patchable) {
              for (let i = 0; i < cbs.create.length; ++i) {
                cbs.create[i](emptyNode, ancestor)
              }
              // #6513
              // invoke insert hooks that may have been merged by create hooks.
              // e.g. for directives that uses the "inserted" hook.
              const insert = ancestor.data.hook.insert
              if (insert.merged) {
                // start at index 1 to avoid re-invoking component mounted hook
                for (let i = 1; i < insert.fns.length; i++) {
                  insert.fns[i]()
                }
              }
            } else {
              registerRef(ancestor)
            }
            ancestor = ancestor.parent
          }
        }
        // 移除老节点
        if (isDef(parentElm)) {
          removeVnodes([oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          invokeDestroyHook(oldVnode)
        }
      }
    }
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }
复制代码