Vue源碼分析一：Vue中的data是如何驅動視圖渲染的？

時間  2020-01-14
標籤 vue 源碼 分析 data 如何 驅動 視圖 渲染 简体版
原文   原文鏈接

前言

你有沒有發現，從小到大，你好像歷來沒有把一件事情作好過？html

說明

這將是一個Vue源碼解析的系列文章，該篇是第一章，後續文章「Vue源碼分析二：響應式原理，視圖更新？(juejin.im/post/5e0dd4…)」持續輸出中...vue

正文

你們都知道，Vue的核心思想就是經過數據驅動視圖更新，咱們對視圖的修改全都是經過修改data去觸發視圖的更新，那麼，它的底層原理究竟是怎樣的呢？本次的源碼分析是基於Vue2.6.10進行的，接下來，咱們就來一探究竟！node

1、new Vue

代碼試例：

<template>
    <div id="app">
      {{ message }}
    </div>
</template>
<script>
    var vm = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!'
          }
        })
</script>

複製代碼

那麼message究竟是如何渲染到視圖上的呢？git

源碼分析：

源碼路徑：src/core/instance/index.jsgithub

/**
 * Vue構造函數
 * @param     {object}    options     new Vue的時候咱們傳入的那個對象
 */
function Vue (options) {
  // ...
  /* 初始化 */
  this._init(options)
}
複製代碼

咱們再來看一下 _init() 作了啥子？web

源碼路徑：src/core/instance/init.js算法

Vue.prototype._init = function (options?: Object) {
    /* 把Vue賦值給vm */
    const vm: Component = this;
    /* 能夠看出$options是經過mergeOptions這個方法去合併合併咱們傳入的options獲得的 */
    vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
    )
    // ...
    /* 初始化生命週期 */
    initLifecycle(vm)
    /* 初始化事件對象 */
    initEvents(vm)
    /* 初始化render */
    initRender(vm)
    /* 觸發beforeCreate鉤子 */
    callHook(vm, 'beforeCreate')
    /* initState 初始化props, data, methods, watch, computed等屬性 */
    initState(vm)
    /* 初始化created鉤子 */
    callHook(vm, 'created')
    // ...

    if (vm.$options.el) {
      /* 當el屬性存在，執行掛載組件 */
      vm.$mount(vm.$options.el)
    }
  }
複製代碼

上述源碼能夠很清楚的發現，_init這個方法主要作了合併配置(options)，初始化生命週期，事件中心，渲染函數，以及props, data, methods, watch, computed等屬性，而且props, data, methods, watch, computed是在beforeCreate和created這兩個生命週期中間才發生的，這也就驗證了爲何咱們不能在beforeCreate生命週期中去修改data,props等的緣由，嘿嘿嘿😊。 最後，咱們能夠看到若是$options裏有el，則觸發$mount()方法，進行組件掛載，目標就是把模版渲染成Dom。編程

2、$mount組件掛載

由於$mount這個方法與平臺（web, weex）還有構建方式都有關係，不一樣的平臺有不一樣的掛載方式，所以Vue源碼中實現了好幾種，咱們主要分析編譯版本的$mount。開搞開搞！數組

源碼路徑：src/platform/web/entry-runtime-with-compiler.js瀏覽器

/* 把本來不帶編譯的$mount方法保存下來，在最後會調用 */
const mount = Vue.prototype.$mount
/**
 * 從新定義$mount
 * @param     {string | Element}    el     掛載標籤
 * @param     {boolean}    hydrating     服務端渲染標誌
 */
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)
  /* Vue不容許掛載在body或者html根結點上 */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  /* 若沒有render方法，則把el或者template字符串轉換成render方法 */
  if (!options.render) {
    let template = options.template
    /* 處理模版template，編譯成render函數，render不存在的時候纔會編譯template,不然優先使用render */
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        /* 當template爲dom節點的時候 */
        template = template.innerHTML
      } else {
        // ...
      }
    } else if (el) {
      /* 獲取template的outerHTML */
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }
      /* 編譯的入口, 將template編譯成render函數，
      * staticRenderFns是編譯優化，static靜態不須要在VNode更新時進行patch，優化性能
      */
      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      /* 將編譯成的render賦值給options.render */
      options.render = render
      options.staticRenderFns = staticRenderFns

      // ...
    }
  }
  /* 最後執行一開始緩存下來的原型上的mount */
  return mount.call(this, el, hydrating)
}
複製代碼

解析：首先緩存原型上的mount,這個方法不帶編譯，而後最後去調用。該方法主要做用是將el和template這倆字符串轉換成render方法，這是Vue的一個「在線編譯」過程，其中編譯出來的staticRenderFns屬於靜態渲染方法，這個方法主要去渲染一些靜態文案，標籤等，那麼在虛擬Dom進行更新的時候就不會觸發patch()和diff算法去計算這些靜態元素再次更新，屬於Vue的一個性能優化。

原型上的$mount

源碼路徑：src/platform/web/runtime/index.js

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean // 服務端渲染相關的參數
): Component {
  /* 在瀏覽器環境下轉換成DOM對象 */
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}
複製代碼

解析：咱們能夠看到，尤大大清晰的標明瞭public mount method，也就是說這個方法是用來複用滴。咱們發現$mount主要調用了mountComponent。

源碼路徑：src/core/instance/lifecycle.js

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el;
  /* 觸發beforeMount鉤子 */
  callHook(vm, 'beforeMount')
  
  /* 該方法調用vm._render方法先生成虛擬Node，最終調用vm._update更新 DOM */
  let updateComponent
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      /* 執行渲染 */
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      /* 執行更新 */
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
    /* _update接受的第一個參數是render後的虛擬dom */
      vm._update(vm._render(), hydrating)
    }
  }

  /* 實例化Watcher(觀察者對象)，執行updateComponent，觸發更新 */
  new Watcher(vm, updateComponent, noop, {
    before () {
      /* 更新前先判斷實例是否已經掛載而且沒有被銷燬 */
      if (vm._isMounted && !vm._isDestroyed) {
        /* 執行beforeUpdate鉤子 */
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)

  /* vm.$vnode表示Vue實例的父虛擬Node,爲null表示當前是根Vue實例*/
  if (vm.$vnode == null) {
    // 表示根實例已經掛載
    vm._isMounted = true
    // 執行mounted鉤子函數
    callHook(vm, 'mounted')
  }
  return vm
}
複製代碼

解析：該方法核心是實例化Watcher（觀察者對象），調用updateComponent，updateComponent裏先調用 vm._render 方法先生成虛擬 Node，最終調用 vm._update 更新 DOM。Watcher主要有兩個做用：
①初始化渲染虛擬Dom；
②當檢測到data數據發生變化的時候執行更新；
所以接下來咱們會分析vm._render和vm._update這倆核心方法，come on!

3、render

源碼路徑：src/core/instance/render.js

/* 渲染出虛擬dom */
  Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options
    
    let vnode
    try {
      // ...
      /* 虛擬node */
      vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
        // ...
    }
    // ...
    if (!(vnode instanceof VNode)) {
      if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
        warn(
          'Multiple root nodes returned from render function. Render function ' +
          'should return a single root node.',
          vm
        )
      }
      /* render報錯的時候建立一個空的虛擬節點 */
      vnode = createEmptyVNode()
    }
    // set parent
    vnode.parent = _parentVnode
    return vnode
  }
複製代碼

解析：主要就是調用了render()去渲染出虛擬dom。所以咱們一開始的例子：

<div id="app">
  {{ message }}
</div>
複製代碼

編寫成render函數就是介個樣子：

render: function (createElement) {
  return createElement('div', {
     attrs: {
        id: 'app'
      },
  }, this.message)
}
複製代碼

能夠發現：render接受一個「createElement」參數，而後咱們再看上述源碼：

vnode = render.call(vm._renderProxy, vm.$createElement)
複製代碼

實錘了：render函數中的 createElement 方法就是 vm.$createElement 方法。而vm.$createElement是在initRender方法中定義的

export function initRender (vm: Component) {
  // ...
  /* 被模版編譯成render函數的時候使用,建立VNode節點 */
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  /* 用戶手寫render函數時調用 */
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
}
複製代碼

解析：createElement建立了VNode(虛擬節點)，那麼咱們分別來看一下VNode和createElement。

4、VNode(虛擬節點)

源碼路徑：src/core/vdom/vnode.js

export default class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; 
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node

  // strictly internal
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?
  asyncFactory: Function | void; // async component factory function
  asyncMeta: Object | void;
  isAsyncPlaceholder: boolean;
  ssrContext: Object | void;
  fnContext: Component | void; // real context vm for functional nodes
  fnOptions: ?ComponentOptions; // for SSR caching
  devtoolsMeta: ?Object; // used to store functional render context for devtools
  fnScopeId: ?string; // functional scope id support

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    /* 當前節點的標籤名 */
    this.tag = tag
    /* 當前節點對應的對象，包含了一些具體的數據信息，是一個VNodeData類型 */
    this.data = data
    /* 當前節點的子節點，數組 */
    this.children = children
    /* 當前節點的文本 */
    this.text = text
    /* 當前虛擬節點對應的真實dom節點 */
    this.elm = elm
    /* 當前節點的名字空間 */
    this.ns = undefined
    /* 編譯做用域 */
    this.context = context
    /* 函數化組件做用域 */
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    /* 節點的key屬性，被看成節點的標誌，用以優化 */
    this.key = data && data.key
    /* 組件的options選項 */
    this.componentOptions = componentOptions
    /* 當前節點對應的組件實例 */
    this.componentInstance = undefined
    /* 當前節點的父節點 */
    this.parent = undefined
    /* 是否爲原生HTML或只是普通文本，innerHTML的時候爲true，textContent的時候爲false */
    this.raw = false
    /* 靜態節點的標誌 */
    this.isStatic = false
    /* 是否做爲根節點插入 */
    this.isRootInsert = true
    /* 是否爲註釋節點 */
    this.isComment = false
    /* 是否爲克隆節點 */
    this.isCloned = false
    /* 是否有v-once指令 */
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }
  
  get child (): Component | void {
    return this.componentInstance
  }
}
複製代碼

解析：能夠看出，在 Vue.js 中，Virtual DOM 就是用 VNode 這麼一個 Class類 去描述的！VNode是對真實DOM的一種抽象描述，它是用來映射到真實DOM到渲染，它的核心屬性也就標籤名、數據、子節點、鍵值等，因此看到上述那麼多屬性密密麻麻，不要產生密集恐懼症哈哈，不要怕，雄起！！！那麼映射的過程當中，主要經歷了create、diff、patch等過程，而create就是經過咱們上邊提到的createElement來實現的。

5、createElement

源碼路徑：src/core/vdom/create-elemenet.js

/* 對_createElement的封裝，可傳入一些靈活的參數，最後調用_createElement */
export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE
  }
  return _createElement(context, tag, data, children, normalizationType)
}
複製代碼
/**
 * 建立元素
 * @param     {Component}    context     VNode上下文環境
 * @param     {string}    tag     元素標籤
 * @param         data     VNode的數據
 * @param         children     當前VNode的子節點
 * @param         normalizationType     子節點規範的類型（參考 render 函數是編譯生成的仍是用戶手寫的。）
 * @returns    vnode      建立的節點
 */
export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
  // ...
  /* 根據render的類型選擇規範children的方法 */
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  // ...
  /* 建立VNode */
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // ...
      /*tag是一個string類型，建立一個普通的VNode */
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      /* 若是是一個已註冊的組件名，建立一個組件類的VNode */
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    /* tag不是string，則直接建立組件類VNode */
    vnode = createComponent(tag, data, context, children)
  }
  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
    if (isDef(ns)) applyNS(vnode, ns)
    if (isDef(data)) registerDeepBindings(data)
    return vnode
  } else {
    return createEmptyVNode()
  }
}
複製代碼

解析：以上主要有兩個核心流程：
①children的規範化（VNode的子節點）；
②VNode 的建立；

children規範化：

因爲 Virtual DOM 其實是一個樹狀結構，每個 VNode 可能會有若干個子節點，這些子節點應該也是 VNode 的類型。_createElement 接收的第 4 個參數 children 是任意類型的，所以咱們須要把它們規範成 VNode 類型。
這裏根據 normalizationType 的不一樣（就是render是用戶手寫的仍是Vue編譯的），當render是Vue編譯的，則調用 normalizeChildren(children)；若是render是用戶手寫的，則調用 simpleNormalizeChildren(children) 方法。

源碼路徑：src/core/vdom/helpers/normalzie-children.js

/* 使用場景是render函數是編譯生成的 */
export function simpleNormalizeChildren (children: any) {
  for (let i = 0; i < children.length; i++) {
    if (Array.isArray(children[i])) {
      return Array.prototype.concat.apply([], children)
    }
  }
  return children
}
複製代碼

解析：理論上，編譯生成的children應該已是VNode類型了，但這裏有一個意外，就是 functional component 函數式組件返回的是一個數組而不是一個根節點，因此會經過 Array.prototype.concat 方法把整個 children 數組打平，讓它的深度只有一層，誒，是否是又學了一招打平數組的方法哈哈😊；

/* render函數是用戶手寫的 */
export function normalizeChildren (children: any): ?Array<VNode> {
  return isPrimitive(children)
    ? [createTextVNode(children)]
    : Array.isArray(children)
      ? normalizeArrayChildren(children)
      : undefined
}
複製代碼

解析：這方法應用在兩個場景：
①children只有一個節點的時候，會調用createTextVNode建立一個文本節點的VNode；
②當編譯v-for或者slot的時候，children多是個數組，調用normalizeArrayChildren；

/**
 * 規範children
 * @param     {any}    children     子節點
 * @param     {string}    nestedIndex     嵌套層數的索引
 */
function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
  const res = []
  let i, c, lastIndex, last
  for (i = 0; i < children.length; i++) {
    /* 獲取到children的每一個節點 */
    c = children[i]
    if (isUndef(c) || typeof c === 'boolean') continue
    lastIndex = res.length - 1
    last = res[lastIndex]
    /* 判斷children每一個節點是不是數組，是的話循環遞歸 */
    if (Array.isArray(c)) {
      if (c.length > 0) {
        c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
        // merge adjacent text nodes
        if (isTextNode(c[0]) && isTextNode(last)) {
          res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
          c.shift()
        }
        res.push.apply(res, c)
      }
    } else if (isPrimitive(c)) {
      if (isTextNode(last)) {
        res[lastIndex] = createTextVNode(last.text + c)
      } else if (c !== '') {
        res.push(createTextVNode(c))
      }
    } else {
      if (isTextNode(c) && isTextNode(last)) {
        res[lastIndex] = createTextVNode(last.text + c.text)
      } else {
        /* 給children的每一層設置惟一的key */
        if (isTrue(children._isVList) &&
          isDef(c.tag) &&
          isUndef(c.key) &&
          isDef(nestedIndex)) {
          c.key = `__vlist${nestedIndex}_${i}__`
        }
        res.push(c)
      }
    }
  }
  return res
}
複製代碼

解析：normalizeArrayChildren主要做用就是遍歷 children，得到單個節點 c，而後對 c 的類型判斷，若是是一個數組類型，則遞歸調用 normalizeArrayChildren; 若是是基礎類型，則經過 createTextVNode 方法轉換成 VNode 類型；不然就已是 VNode 類型了，若是 children 是一個列表而且列表還存在嵌套的狀況，則根據 nestedIndex 去更新它的 key。
通過上述一頓操做，就把children 變成了一個類型爲 VNode 的 Array。
回到_createElement裏的建立VNode的部分,此時的children已經被教育好了，乖了，老老實實的編程VNode類型了：

/* 建立VNode */
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // ...
      /*tag是一個string類型，建立一個普通的VNode */
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      /* 若是是一個已註冊的組件名，建立一個組件類的VNode */
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    /* tag不是string，則直接建立組件類VNode */
    vnode = createComponent(tag, data, context, children)
  }
  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
    if (isDef(ns)) applyNS(vnode, ns)
    if (isDef(data)) registerDeepBindings(data)
    return vnode
  } else {
    return createEmptyVNode()
  }
複製代碼

解析：先對 tag 作判斷，若是是 string 類型，則接着判斷若是是內置的一些節點，則直接建立一個普通 VNode，若是是爲已註冊的組件名，則經過 createComponent 建立一個組件類型的 VNode，不然建立一個未知的標籤的 VNode。 若是是 tag 一個 Component 類型，則直接調用 createComponent 建立一個組件類型的 VNode 節點。
所以，咱們大體瞭解了 createElement 建立 VNode 的過程，每一個 VNode 有 children，children 每一個元素也是一個 VNode，這樣就造成了一個 VNode Tree，它很好的描述了咱們的 DOM Tree。
那麼VNode已經被建立出來了，那它是如何渲染成真實DOM的呢？答案：經過vm._update完成。

6、update

源碼路徑：src/core/instance/lifecycle.js

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
    /* 尚未vnode的時候即第一次渲染 */
    if (!prevVnode) {
      /**
       * 初始化渲染
       * @param {Element} vm.$el   Dom對象
       */
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      /* 更新階段 */
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    restoreActiveInstance()、
    if (prevEl) {
      prevEl.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    }
  }
複製代碼

解析：_update主要執行了vm.__patch__方法。

源碼路徑：src/platforms/web/runtime/index.js

Vue.prototype.__patch__ = inBrowser ? patch : noop
複製代碼

能夠發現，這個方法在不一樣的平臺，不一樣的環境有不一樣的表現方式，咱們只看它在web平臺的表現方式；

源碼路徑：src/platforms/web/runtime/patch.js

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'

/* 定義了一些模塊的鉤子函數的實現 */
const modules = platformModules.concat(baseModules)

export const patch: Function = createPatchFunction({ nodeOps, modules })
複製代碼

解析：該方法的定義是調用 createPatchFunction 方法的返回值，這裏傳入了一個對象，包含 nodeOps 參數和 modules 參數。其中，nodeOps 封裝了一系列 DOM 操做的方法，modules 定義了一些模塊的鉤子函數的實現。
接下來咱們來看createPatchFunction的實現：

源碼路徑：src/core/vdom/patch.js

export function createPatchFunction (backend) {
  // ...
  /**
   * 功能說明
   *
   * @param     {Element}    oldVnode     舊的Vnode節點，能夠爲空或者是一個Dom對象
   * @param     {Element}    vnode     執行_render後返回的VNode節點
   * @param         hydrating     是不是服務端渲染
   * @param         removeOnly    給 transition-group 用的
   */
  return function patch (oldVnode, vnode, hydrating, removeOnly) {
    /* vnode不存在直接調用銷燬鉤子 */
    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
      /* oldVnode未定義的時候，其實也就是root節點，建立一個新的節點 */
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue)
    } else {
      /* 標記舊的VNode是否有nodeType */
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        /* 是同一個節點的時候直接修改現有的節點 */
        /* 注意⚠️：當oldVnode與vnode在sameVnode的時候纔會進行patchVnode，也就是新舊VNode節點斷定爲同一節點的時候纔會進行patchVnode這個過程，不然就是建立新的DOM，移除舊的DOM */
        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)) {
            /* 當舊的VNode是服務端渲染的元素， hydrating=true*/
            oldVnode.removeAttribute(SSR_ATTR)
            hydrating = true
          }
          if (isTrue(hydrating)) {
            /*須要合併到真實DOM上*/
            if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
              /*調用insert鉤子*/
              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
          /*若是不是服務端渲染或者合併到真實DOM失敗，則建立一個空的VNode節點替換它*/
          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)) {
          /* 組件根節點被替換，遍歷更新父節點element */
          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) {
              /*調用create回調*/
              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([oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          /*調用destroy鉤子*/
          invokeDestroyHook(oldVnode)
        }
      }
    }
    /*調用insert鉤子*/
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }
}
複製代碼

解析：createPatchFunction內部定義了一系列的輔助方法，前邊的內容咱們暫時不看，代碼老長了，心累💔。 上邊的源碼咱們能夠先不看，經過例子來一步一步分析。 它主要返回了patch這個方法，即咱們上邊提到的vm.__patch__;
先看patch這個方法，它接受的參數我已經在源碼裏標明瞭；
咱們來拿一開始的例子解析：

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

而後咱們在 vm._update 的方法裏是這麼調用 patch 方法的：

vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
複製代碼

分析一波：咱們的例子一上來確定是首次渲染，那麼執行patch的時候，傳入的vm.$el就是id爲app的DOM對象了，而vnode就是上邊咱們經過vm._render渲染以後的虛擬VNode。先看patch中的部分邏輯：

/* 標記oldVnode是否有nodeType，是不是真實Dom */
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        /* 當判斷出新老node屬於同一個節點的時候直接修改現有的節點 */
        /* 注意⚠️：當oldVnode與vnode在sameVnode的時候纔會進行patchVnode，也就是新舊VNode節點斷定爲同一節點的時候纔會進行patchVnode這個過程，不然就是建立新的DOM，移除舊的DOM */
        patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
      } else {
        if (isRealElement) {
          // ...
          if (isTrue(hydrating)) {
            /*須要合併到真實DOM上*/
            if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
              /*調用insert鉤子*/
              invokeInsertHook(vnode, insertedVnodeQueue, true)
              return oldVnode
            }
            // ...
          }
          /*若是不是服務端渲染或者合併到真實DOM失敗，則建立一個空的VNode節點替換它*/
          oldVnode = emptyNodeAt(oldVnode)
        }
        
        /*取代現有元素*/
        const oldElm = oldVnode.elm
        const parentElm = nodeOps.parentNode(oldElm)

        /* 建立真實節點 */
        createElm(
          vnode,
          insertedVnodeQueue,
          oldElm._leaveCb ? null : parentElm,
          nodeOps.nextSibling(oldElm)
        )
        if (isDef(vnode.parent)) {
          /* 組件根節點被替換，遍歷更新父節點element */
          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) {
              /*調用create回調*/
              for (let i = 0; i < cbs.create.length; ++i) {
                cbs.create[i](emptyNode, ancestor)
              }
              const insert = ancestor.data.hook.insert
              if (insert.merged) {
                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([oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          /*調用destroy鉤子*/
          invokeDestroyHook(oldVnode)
        }
      }
複製代碼

解析：經過源碼和咱們的例子能夠看出：咱們傳入的oldVnode其實是Dom container,也就是vm.$el，接下來又經過 emptyNodeAt 方法把 oldVnode 轉換成 VNode 對象，而後再調用 createElm 方法，建立真實的節點：

/* 將虛擬節點建立成真實節點，並插入到它的父節點中 */
  function createElm (
    vnode,
    insertedVnodeQueue,
    parentElm,
    refElm,
    nested,
    ownerArray,
    index
  ) {
    // ...

    vnode.isRootInsert = !nested // for transition enter check
    /* createComponent建立子組件，當前返回值爲false */
    if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
      return
    }

    const data = vnode.data
    const children = vnode.children
    const tag = vnode.tag
    if (isDef(tag)) {
      // ...
      /* 調用平臺 DOM 的操做去建立一個佔位符元素 */
      vnode.elm = vnode.ns
        ? nodeOps.createElementNS(vnode.ns, tag)
        : nodeOps.createElement(tag, vnode)
      setScope(vnode)

      if (__WEEX__) {
        // ...
      } else {
        /* 建立子元素 */
        createChildren(vnode, children, insertedVnodeQueue)
        if (isDef(data)) {
          /* 執行全部的 create 的鉤子並把 vnode push 到 insertedVnodeQueue */
          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)
    }
  }
複製代碼

解析：先調用createChildren去建立子元素，而後執行invokeCreateHooks把虛擬VNode所有推到insertedVnodeQueue中去，再執行insert把Dom插入到父節點中去。

先來看一下createChildren：

/* 建立子元素 */
  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，這是一種經常使用的深度優先的遍歷算法。

invokeCreateHooks先不看了，有興趣到能夠本身看一下

再看：insert

/* 遞歸調用該方法，將dom循環插入parent節點中去 */
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，因此整個 vnode 樹節點的插入順序是先子後父。

看看insertBefore和appendChild:

源碼路徑： src/platforms/web/runtime/node-ops.js

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

export function appendChild (node: Node, child: Node) {
  node.appendChild(child)
}
複製代碼

解析：是否是恍然大明白兒了，是的，Vue就是調用DOM的原生Api進行DOM操做的。
而後回到咱們的例子：
在 createElm 過程當中，若是 vnode 節點不包含 tag，則它有多是一個註釋或者純文本節點，能夠直接插入到父元素中。在咱們這個例子中，最內層就是一個文本 vnode，它的 text 值取的就是以前的 this.message 的值 Hello Vue!
再回到 patch 方法，首次渲染咱們調用了 createElm 方法，這裏傳入的 parentElm 是 oldVnode.elm 的父元素，在咱們的例子是 id 爲 #app div 的父元素，也就是 Body；實際上整個過程就是遞歸建立了一個完整的 DOM 樹並插入到 Body 上。

7、總結

好啦，終於叭叭兒完了，好累好累😄。
那麼最後，咱們來總結一會兒，是否是忘的差很少了啊😂。
先放一張黃軼老師的圖：

總結：首先，咱們new一個Vue實例，而後執行了Vue的 _init方法，主要是進行了一系列的初始化渲染函數，而後執行了$mount方法，把el和template轉成render方法，而後調用了mountComponent方法，執行了 vm._render 方法，而後 _render生成VNode虛擬DOM，接着經過 vm._update，patch方法，調用createElem()，循環遞歸把children插入到他們的父節點中去，將虛擬DOM渲染成真實DOM，哈哈，是否是又鞏固了一波。

後言

本文章主要參考了：
1.黃軼老師的源碼分析：(ustbhuangyi.github.io/vue-analysi…)
2.染墨大佬的源碼分析：(github.com/answershuto…) 第一次在掘金髮表文章，但願各路大佬批評指正文中的錯誤表達，該表揚👍就表揚，該噴就噴（個人心裏相對仍是比較堅強的😢）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程