update

    update 的核心就是调用 vm._patch 方法，这个方法实际上在不同的平台，比如 web 和 weex 上的定义是不一样的，因此在 web 平台中它的定义在 src/platforms/web/runtime/index.js 中：

    1. Vue.prototype.__patch__ = inBrowser ? patch : noop

    可以看到，甚至在 web 平台上，是否是服务端渲染也会对这个方法产生影响。因为在服务端渲染中，没有真实的浏览器 DOM 环境，所以不需要把 VNode 最终转换成 DOM，因此是一个空函数，而在浏览器端渲染中，它指向了 patch 方法，它的定义在 src/platforms/web/runtime/patch.js中：

    1. import * as nodeOps from 'web/runtime/node-ops'
    2. import { createPatchFunction } from 'core/vdom/patch'
    3. import baseModules from 'core/vdom/modules/index'
    4. import platformModules from 'web/runtime/modules/index'
    6. // the directive module should be applied last, after all
    7. // built-in modules have been applied.
    8. const modules = platformModules.concat(baseModules)
    10. export const patch: Function = createPatchFunction({ nodeOps, modules })

    该方法的定义是调用 createPatchFunction 方法的返回值，这里传入了一个对象，包含 nodeOps 参数和 modules 参数。其中，nodeOps 封装了一系列 DOM 操作的方法，modules 定义了一些模块的钩子函数的实现，我们这里先不详细介绍，来看一下 createPatchFunction 的实现，它定义在 src/core/vdom/patch.js 中：

    1. const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
    3. export function createPatchFunction (backend) {
    4.   let i, j
    5.   const cbs = {}
    7.   const { modules, nodeOps } = backend
    9.   for (i = 0; i < hooks.length; ++i) {
    10.     cbs[hooks[i]] = []
    11.     for (j = 0; j < modules.length; ++j) {
    12.       if (isDef(modules[j][hooks[i]])) {
    13.         cbs[hooks[i]].push(modules[j][hooks[i]])
    14.       }
    15.     }
    16.   }
    18.   // ...
    20.   return function patch (oldVnode, vnode, hydrating, removeOnly) {
    21.     if (isUndef(vnode)) {
    22.       if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
    23.       return
    24.     }
    26.     let isInitialPatch = false
    27.     const insertedVnodeQueue = []
    29.     if (isUndef(oldVnode)) {
    30.       // empty mount (likely as component), create new root element
    31.       isInitialPatch = true
    32.       createElm(vnode, insertedVnodeQueue)
    33.     } else {
    34.       const isRealElement = isDef(oldVnode.nodeType)
    35.       if (!isRealElement && sameVnode(oldVnode, vnode)) {
    36.         // patch existing root node
    37.         patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
    38.       } else {
    39.         if (isRealElement) {
    40.           // mounting to a real element
    41.           // check if this is server-rendered content and if we can perform
    42.           // a successful hydration.
    43.           if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
    44.             oldVnode.removeAttribute(SSR_ATTR)
    45.             hydrating = true
    46.           }
    47.           if (isTrue(hydrating)) {
    48.             if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
    49.               invokeInsertHook(vnode, insertedVnodeQueue, true)
    50.               return oldVnode
    51.             } else if (process.env.NODE_ENV !== 'production') {
    52.               warn(
    53.                 'The client-side rendered virtual DOM tree is not matching ' +
    54.                 'server-rendered content. This is likely caused by incorrect ' +
    55.                 'HTML markup, for example nesting block-level elements inside ' +
    56.                 '<p>, or missing <tbody>. Bailing hydration and performing ' +
    57.                 'full client-side render.'
    58.               )
    59.             }
    60.           }
    61.           // either not server-rendered, or hydration failed.
    62.           // create an empty node and replace it
    63.           oldVnode = emptyNodeAt(oldVnode)
    64.         }
    66.         // replacing existing element
    67.         const oldElm = oldVnode.elm
    68.         const parentElm = nodeOps.parentNode(oldElm)
    70.         // create new node
    71.         createElm(
    72.           vnode,
    73.           insertedVnodeQueue,
    74.           // extremely rare edge case: do not insert if old element is in a
    75.           // leaving transition. Only happens when combining transition +
    76.           // keep-alive + HOCs. (#4590)
    77.           oldElm._leaveCb ? null : parentElm,
    78.           nodeOps.nextSibling(oldElm)
    79.         )
    81.         // update parent placeholder node element, recursively
    82.         if (isDef(vnode.parent)) {
    83.           let ancestor = vnode.parent
    84.           const patchable = isPatchable(vnode)
    85.           while (ancestor) {
    86.               cbs.destroy[i](ancestor)
    87.             }
    88.             ancestor.elm = vnode.elm
    89.             if (patchable) {
    90.               for (let i = 0; i < cbs.create.length; ++i) {
    91.                 cbs.create[i](emptyNode, ancestor)
    92.               }
    93.               // #6513
    94.               // invoke insert hooks that may have been merged by create hooks.
    95.               // e.g. for directives that uses the "inserted" hook.
    96.               const insert = ancestor.data.hook.insert
    97.               if (insert.merged) {
    98.                 // start at index 1 to avoid re-invoking component mounted hook
    99.                 for (let i = 1; i < insert.fns.length; i++) {
    100.                   insert.fns[i]()
    101.                 }
    102.               }
    104.               registerRef(ancestor)
    105.             }
    106.             ancestor = ancestor.parent
    107.           }
    108.         }
    110.         // destroy old node
    111.         if (isDef(parentElm)) {
    112.           removeVnodes(parentElm, [oldVnode], 0, 0)
    113.         } else if (isDef(oldVnode.tag)) {
    114.           invokeDestroyHook(oldVnode)
    115.         }
    116.       }
    117.     }
    119.     invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    120.     return vnode.elm
    121.   }
    122. }

    createPatchFunction 内部定义了一系列的辅助方法，最终返回了一个 patch 方法，这个方法就赋值给了 vm.update 函数里调用的 vm._patch。

    在介绍 patch 的方法实现之前，我们可以思考一下为何 Vue.js 源码绕了这么一大圈，把相关代码分散到各个目录。因为前面介绍过，patch 是平台相关的，在 Web 和 Weex 环境，它们把虚拟 DOM 映射到 “平台 DOM” 的方法是不同的，并且对 “DOM” 包括的属性模块创建和更新也不尽相同。因此每个平台都有各自的 nodeOps 和 modules，它们的代码需要托管在 src/platforms 这个大目录下。

    而不同平台的 patch 的主要逻辑部分是相同的，所以这部分公共的部分托管在 core 这个大目录下。差异化部分只需要通过参数来区别，这里用到了一个函数柯里化的技巧，通过 createPatchFunction 把差异化参数提前固化，这样不用每次调用 patch 的时候都传递 nodeOps 和 modules 了，这种编程技巧也非常值得学习。

    在这里，nodeOps 表示对 “平台 DOM” 的一些操作方法，modules 表示平台的一些模块，它们会在整个 patch 过程的不同阶段执行相应的钩子函数。这些代码的具体实现会在之后的章节介绍。

    回到 patch 方法本身，它接收 4个参数，oldVnode 表示旧的 VNode 节点，它也可以不存在或者是一个 DOM 对象；vnode 表示执行 _render 后返回的 VNode 的节点；hydrating 表示是否是服务端渲染；removeOnly 是给 transition-group 用的，之后会介绍。

    先来回顾我们的例子：

    然后我们在 vm._update 的方法里是这么调用 patch 方法的：

    1. // initial render
    2. vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)

    结合我们的例子，我们的场景是首次渲染，所以在执行 patch 函数的时候，传入的 vm.$el 对应的是例子中 id 为 app 的 DOM 对象，这个也就是我们在 index.html 模板中写的 <div id="app">， vm.$el 的赋值是在之前 mountComponent 函数做的，vnode 对应的是调用 render 函数的返回值，hydrating 在非服务端渲染情况下为 false，removeOnly 为 false。

    确定了这些入参后，我们回到 patch 函数的执行过程，看几个关键步骤。

    1. const isRealElement = isDef(oldVnode.nodeType)
    2. if (!isRealElement && sameVnode(oldVnode, vnode)) {
    3.   // patch existing root node
    4.   patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
    5. } else {
    6.   if (isRealElement) {
    7.     // mounting to a real element
    8.     // check if this is server-rendered content and if we can perform
    9.     // a successful hydration.
    10.     if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
    11.       oldVnode.removeAttribute(SSR_ATTR)
    12.       hydrating = true
    13.     }
    14.     if (isTrue(hydrating)) {
    15.       if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
    16.         invokeInsertHook(vnode, insertedVnodeQueue, true)
    17.         return oldVnode
    18.       } else if (process.env.NODE_ENV !== 'production') {
    19.         warn(
    20.           'The client-side rendered virtual DOM tree is not matching ' +
    21.           'server-rendered content. This is likely caused by incorrect ' +
    22.           'HTML markup, for example nesting block-level elements inside ' +
    23.           '<p>, or missing <tbody>. Bailing hydration and performing ' +
    24.           'full client-side render.'
    25.         )
    26.       }
    27.     }      
    28.     // either not server-rendered, or hydration failed.
    29.     // create an empty node and replace it
    30.     oldVnode = emptyNodeAt(oldVnode)
    31.   }
    33.   // replacing existing element
    34.   const oldElm = oldVnode.elm
    35.   const parentElm = nodeOps.parentNode(oldElm)
    37.   // create new node
    38.   createElm(
    39.     vnode,
    40.     insertedVnodeQueue,
    41.     // extremely rare edge case: do not insert if old element is in a
    42.     // leaving transition. Only happens when combining transition +
    43.     // keep-alive + HOCs. (#4590)
    44.     oldElm._leaveCb ? null : parentElm,
    45.     nodeOps.nextSibling(oldElm)
    46.   )
    47. }

    由于我们传入的 oldVnode 实际上是一个 DOM container，所以 isRealElement 为 true，接下来又通过 emptyNodeAt 方法把 oldVnode 转换成 VNode 对象，然后再调用 createElm 方法，这个方法在这里非常重要，来看一下它的实现：

    1. function createElm (
    2.   vnode,
    3.   insertedVnodeQueue,
    4.   parentElm,
    5.   refElm,
    6.   nested,
    7.   ownerArray,
    8.   index
    9. ) {
    10.   if (isDef(vnode.elm) && isDef(ownerArray)) {
    11.     // This vnode was used in a previous render!
    12.     // potential patch errors down the road when it's used as an insertion
    13.     // reference node. Instead, we clone the node on-demand before creating
    15.     vnode = ownerArray[index] = cloneVNode(vnode)
    16.   }
    18.   vnode.isRootInsert = !nested // for transition enter check
    19.   if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
    20.     return
    21.   }
    23.   const data = vnode.data
    24.   const children = vnode.children
    25.   const tag = vnode.tag
    26.   if (isDef(tag)) {
    27.     if (process.env.NODE_ENV !== 'production') {
    28.       if (data && data.pre) {
    29.         creatingElmInVPre++
    30.       }
    31.       if (isUnknownElement(vnode, creatingElmInVPre)) {
    32.         warn(
    33.           'Unknown custom element: <' + tag + '> - did you ' +
    34.           'register the component correctly? For recursive components, ' +
    35.           'make sure to provide the "name" option.',
    36.           vnode.context
    37.         )
    38.       }
    39.     }
    41.     vnode.elm = vnode.ns
    42.       ? nodeOps.createElementNS(vnode.ns, tag)
    43.       : nodeOps.createElement(tag, vnode)
    44.     setScope(vnode)
    46.     /* istanbul ignore if */
    47.     if (__WEEX__) {
    48.       // ...
    49.     } else {
    50.       createChildren(vnode, children, insertedVnodeQueue)
    51.       if (isDef(data)) {
    52.         invokeCreateHooks(vnode, insertedVnodeQueue)
    53.       }
    54.       insert(parentElm, vnode.elm, refElm)
    55.     }
    57.     if (process.env.NODE_ENV !== 'production' && data && data.pre) {
    58.       creatingElmInVPre--
    59.     }
    60.   } else if (isTrue(vnode.isComment)) {
    61.     vnode.elm = nodeOps.createComment(vnode.text)
    62.     insert(parentElm, vnode.elm, refElm)
    63.   } else {
    64.     vnode.elm = nodeOps.createTextNode(vnode.text)
    65.     insert(parentElm, vnode.elm, refElm)
    66.   }
    67. }

    createElm 的作用是通过虚拟节点创建真实的 DOM 并插入到它的父节点中。 我们来看一下它的一些关键逻辑，createComponent 方法目的是尝试创建子组件，这个逻辑在之后组件的章节会详细介绍，在当前这个 case 下它的返回值为 false；接下来判断 vnode 是否包含 tag，如果包含，先简单对 tag 的合法性在非生产环境下做校验，看是否是一个合法标签；然后再去调用平台 DOM 的操作去创建一个占位符元素。

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

    1. createChildren(vnode, children, insertedVnodeQueue)
    3. function createChildren (vnode, children, insertedVnodeQueue) {
    4.   if (Array.isArray(children)) {
    5.     if (process.env.NODE_ENV !== 'production') {
    6.       checkDuplicateKeys(children)
    7.     }
    8.     for (let i = 0; i < children.length; ++i) {
    9.       createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i)
    10.     }
    11.   } else if (isPrimitive(vnode.text)) {
    12.     nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))
    13.   }
    14. }

    createChildren 的逻辑很简单，实际上是遍历子虚拟节点，递归调用 createElm，这是一种常用的深度优先的遍历算法，这里要注意的一点是在遍历过程中会把 vnode.elm 作为父容器的 DOM 节点占位符传入。

    1.  if (isDef(data)) {
    2.   invokeCreateHooks(vnode, insertedVnodeQueue)
    3. }
    5. function invokeCreateHooks (vnode, insertedVnodeQueue) {
    6.   for (let i = 0; i < cbs.create.length; ++i) {
    7.     cbs.create[i](emptyNode, vnode)
    8.   }
    9.   i = vnode.data.hook // Reuse variable
    10.   if (isDef(i)) {
    11.     if (isDef(i.create)) i.create(emptyNode, vnode)
    12.     if (isDef(i.insert)) insertedVnodeQueue.push(vnode)
    13.   }
    14. }

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

    1. insert(parentElm, vnode.elm, refElm)
    3. function insert (parent, elm, ref) {
    4.   if (isDef(parent)) {
    5.     if (isDef(ref)) {
    6.       if (ref.parentNode === parent) {
    7.         nodeOps.insertBefore(parent, elm, ref)
    8.       }
    9.     } else {
    10.       nodeOps.appendChild(parent, elm)
    11.     }
    12.   }
    13. }

    insert 逻辑很简单，调用一些 nodeOps 把子节点插入到父节点中，这些辅助方法定义在 src/platforms/web/runtime/node-ops.js 中：

    其实就是调用原生 DOM 的 API 进行 DOM 操作，看到这里，很多同学恍然大悟，原来 Vue 是这样动态创建的 DOM。

    在 createElm 过程中，如果 vnode 节点不包含 tag，则它有可能是一个注释或者纯文本节点，可以直接插入到父元素中。在我们这个例子中，最内层就是一个文本 vnode，它的 text 值取的就是之前的 this.message 的值 Hello Vue!。

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

    最后，我们根据之前递归 createElm 生成的 vnode 插入顺序队列，执行相关的 insert 钩子函数，这部分内容我们之后会详细介绍。

    那么至此我们从主线上把模板和数据如何渲染成最终的 DOM 的过程分析完毕了，我们可以通过下图更直观地看到从初始化 Vue 到最终渲染的整个过程。

    我们这里只是分析了最简单和最基础的场景，在实际项目中，我们是把页面拆成很多组件的，Vue 另一个核心思想就是组件化。那么下一章我们就来分析 Vue 的组件化过程。