update

Vue 的 _update 是實例的一個私有方法，它被調(diào)用的時機有 2 個，一個是首次渲染，一個是數(shù)據(jù)更新的時候，我這章就先看一下首次渲染部分，數(shù)據(jù)更新部分等分析到響應(yīng)式的原理的時候，在涉及到。_update 方法的作用是把 VNode 渲染成真實的 DOM，定義在: src/core/instance/lifecycle.js 中:

 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
    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 */,
        vm.$options._parentElm,
        vm.$options._refElm
      )
      // no need for the ref nodes after initial patch
      // this prevents keeping a detached DOM tree in memory (#5851)
      vm.$options._parentElm = vm.$options._refElm = null
    } else {
      // updates
      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
    }
    // updated hook is called by the scheduler to ensure that children are
    // updated in a parent's updated hook.
  }

_update 的核心就是調(diào)用 vm._path_ 方法，這個方法實際上在不同的平臺，如: web 和 weex 上的定義是不一樣的，因此在 web 平臺中它的定義在 src/platforms/web/runtime/index.js 中:

  Vue.prototype.__path__ = inBrowser ？ patch : noop

上面可以看到，甚至在 web 平臺上，是否是服務(wù)端渲染也會對這個方法產(chǎn)生影響。因為在服務(wù)端渲染中，沒有真實的瀏覽器 DOM 環(huán)境，所以不需要把 VNode 最終轉(zhuǎn)化成 DOM，因此是一個空函數(shù)，而在瀏覽器端渲染中，它指向了 patch 方法，定義在 src/platforms/wen/runtime/patch.js 中:

  /* @flow */

import * as nodeOps from 'web/runtime/node-ops'
import { createPatchFunction } from 'core/vdom/patch'
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)

export const patch: Function = createPatchFunction({ nodeOps, modules })

方法的定義是調(diào)用 createPatchFunction 方法的返回值，這里傳入了一個對象，包含了 nodeOps 參數(shù)和 modules 參數(shù)。其中，nodeOps 封裝了一系列 DOM 操作的方法，modules 定義了一些模塊的鉤子函數(shù)的是實現(xiàn)。先來看一下 createPatchFunction 的實現(xiàn)。定義在 src/core/vdom/patch.js

export function createPatchFunction (backend) {
  let i, j
  const cbs = {}

  const { modules, nodeOps } = backend

  for (i = 0; i < hooks.length; ++i) {
    cbs[hooks[i]] = []
    for (j = 0; j < modules.length; ++j) {
      if (isDef(modules[j][hooks[i]])) {
        cbs[hooks[i]].push(modules[j][hooks[i]])
      }
    }
  }

  ...

 return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }

    let isInitialPatch = false
    const insertedVnodeQueue = []

    if (isUndef(oldVnode)) {
      // empty mount (likely as component), create new root element
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue, parentElm, refElm)
    } else {
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        patchVnode(oldVnode, vnode, insertedVnodeQueue, 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 ' +
                '<p>, or missing <tbody>. 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)
        )

        // 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
          }
        }

        // destroy old node
        if (isDef(parentElm)) {
          removeVnodes(parentElm, [oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          invokeDestroyHook(oldVnode)
        }
      }
    }

    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }
}

createPatchFunction 內(nèi)部內(nèi)部定義了一系列的輔助方法，最終會返回上面那個 patch 方法，這個方法就賦值給了 vm.update 函數(shù)里調(diào)用的 vm._patch_。

在分析之前，先先考慮一個問題，Vue 源碼為什么繞了一大圈，把相關(guān)的代碼分散到各個目錄。

之前的章節(jié)里面好像說過，patch 是平臺相關(guān)的，在 Web 和 Weex 環(huán)境，它們把虛擬 DOM 映射到 平臺 DOM 的方法是不同的，并且對 DOM 包含的屬性模塊創(chuàng)建和更新也不盡相同。因此每個平臺都有各自的 nodeOps 和 modules，它們的代碼都放在了 src/platforms 這個大目錄中。
而不同的平臺的 patch 的主要邏輯部分還是相同的，所有這部分公共的代碼托管在 core 這個大目錄中。差異化的部分只需要通過參數(shù)來區(qū)別，這里就用到了一個·函數(shù)柯理化·的技巧，通過 createPatchFunction 把差異化參數(shù)提前固化，這樣不用每次調(diào)用 patch 的時候都傳遞 nodeOps 和 modules 了。

這兩個參數(shù)分別表示: nodeOps 表示對 “平臺 DOM” 的一些操作方法，modules 表示平臺的一些模塊，它們會在整個 patch 過程的不同階段執(zhí)行相應(yīng)的鉤子函數(shù)。
回到 patch 本身，他可以接收 6 個參數(shù)，oldVNode 表示舊的 VNode 節(jié)點，他可以不存在或者是一個 DOM 對象；vnode 表示執(zhí)行 _render 后返回的 Vnode 的節(jié)點；hydrating 表示是否服務(wù)器渲染； removeOnly 是給 transition-group 用的。
patch 的邏輯比較復(fù)雜，它有非常多的分支邏輯，為了方便，以一個例子介紹它的執(zhí)行邏輯。例子:

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

然后在 vm._update 的方法里是這么調(diào)用 patch 方法的:

  vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false ...)

結(jié)合上面的例子，在這個場景中首次渲染，所以在執(zhí)行 patch 函數(shù)的時候，傳入的 vm.$el 對應(yīng)的例子中 id 為 app 的 DOM 對象，vm.$el 的賦值是在之前 mountComponent 函數(shù)做的， VNode 對應(yīng)的是調(diào)用 render 函數(shù)的返回。

  const isRealElement = isDef(oldVnode.nodeType)
  if (!isRealElement && sameVnode(oldVnode, vnode)) {
    // patch existing root node
    patchVnode(oldVnode, vnode, insertedVnodeQueue, 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 ' +
            '<p>, or missing <tbody>. 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)
    }
  }

由于傳入的 oldVNode 實際上是一個 DOM container ，所以，接來下通過 emptyNodeAt 方法把 oldVNode 轉(zhuǎn)換成 VNode 對象，然后在調(diào)用 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 的作用是通過虛擬節(jié)點創(chuàng)建真實的 DOM 并摻入到它的父節(jié)點中。其中關(guān)鍵邏輯，createComponent 方法的目的就是嘗試創(chuàng)建子組件，在當前這個 case 下它返回的值是 false，接下來判斷 VNode 是否包含 tag，如果包含，先簡單對 tag 的合法性在非生產(chǎn)環(huán)境下做校驗，看是否是合法標簽，然后在去調(diào)用平臺 DOM 的操作去創(chuàng)建一個占位符元素。

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

接下來調(diào)用 createChildren 方法去創(chuàng)建子元素:

  
  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 的邏輯就是遍歷子虛擬節(jié)點，遞歸調(diào)用 createEle，這是一種常見的深度優(yōu)先的遍歷算法，這里需要注意的一點是在遍歷過程中會把 VNode.ele 作為父容器的 DOM 節(jié)點占位符傳入。
然后接著會調(diào)用 invokeCreateHooks 方法執(zhí)行所有的 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)
    }
  }

在最后調(diào)用 insert 方法把 DOM 插入到父節(jié)點中，因為是遞歸調(diào)用，子元素會優(yōu)先調(diào)用 insert，所以整個 VNode 樹節(jié)點的插入順序就是 先子后父。
接著來看一下 insert 方法，定義在 src/core/vdom/patch.js 中:

  insert(parentElm, vnode.elm, refElm)

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

insert 邏輯就是，調(diào)用一些 nodeOps 方法把子節(jié)點插入到父節(jié)點中，這些的輔助方法定義在 src/platforms/web/runtime/node-ops.js 中

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

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

其實就是調(diào)用原生 DOM 的 API 進行 DOM 操作，Vue 也是用原生的創(chuàng)建 DOM 的方式動態(tài)創(chuàng)建的 DOM。
在 crateEle 過程中，如果 VNode 節(jié)點如果不包含 tag，則它有可能是一個注釋或者純文本節(jié)點，可以直接插入到父元素中。在上面那個例子中，最內(nèi)層就是一個文本 VNode，它的 text 值取的就是之前的 this.message 的值 Hello World！。
在回到 patch 方法，首次渲染調(diào)用了 createEle 方法，這里傳入的 parentEle 是 oldVnode.ele 的父元素，在例子中 id 為 #app div 的父元素，也就是 Body；實力上整個過程就是遞歸創(chuàng)建一個完整的 DOM 樹并插入到 Body 上。
最后，根據(jù)之前遞歸 createElm 生成的 VNode 插入順序隊列，執(zhí)行相關(guān)的 insert 鉤子函數(shù)。

上面從主線上把模板和數(shù)據(jù)如何渲染成最終的 DOM 的過程分析完畢了。
從初始化 Vue 到最終渲染的整個過程: new Vue => init => $mount => compile => render => vnode => patch => DOM

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue update 首次渲染（Vue2.5 update 源碼解析）

Vue update 首次渲染（Vue2.5 update 源碼解析）

update

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue update 首次渲染（Vue2.5 update 源碼解析）

update

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av