本文章涉及原始碼版本為Vue 2.5.2

為什麼使用virtual dom

做一件事一般都先問問為什麼，那麼為什麼使用virtual dom？真正的 DOM 元素是非常龐大的，因為瀏覽器的標準把 DOM 設計的很複雜。如果頻繁地操作 DOM ，會產生一定的效能問題。 舉個例子：建立一個header標籤，並列印dom的描述資訊：

    var header = document.createElement('header')
    var str = ''
    for (var key in header) {
        str += key + ' '
    }
    console.log(str)
 

可以看到，輸出的資訊雖然挺多看不懂，但可以看得出來這是很龐大的一段內容。 相比之下：Virtual DOM 用一個原生的 JS 物件去描述一個 DOM 節點，所以它比建立一個 DOM 的代價要小很多。

virtual dom 的資料結構

virtual dom的定義在 src/core/vdom/vnode.js 中，是一個VNode 類，部分定義如圖： virtual dom對映到真實的 DOM 實際上要經歷 VNode 的 create、diff、patch 等過程。

virtual dom 的建立

VNode 的 create 是通過 createElement 方法建立的，原始碼位於src/core/vdom/create-elemenet.js

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

這個方式實際呼叫的是_createElement() 方法，此方法同樣位於src/core/vdom/create-elemenet.js 中：

export function _createElement (
  context: Component, // VNode 的上下文環境，Component型別
  tag?: string | Class<Component> | Function | Object, // 標籤，它可以是一個字串、Component、Function、Object
  data?: VNodeData, // VNode 的資料，它是一個 VNodeData 型別
  children?: any, // 當前 VNode 的子節點，任意型別的
  normalizationType?: number // 表示子節點規範化的型別，型別不同規範的方法不一樣
): VNode | Array<VNode> {
  if (isDef(data) && isDef((data: any).__ob__)) {
    process.env.NODE_ENV !== 'production' && warn(
      `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
      'Always create fresh vnode data objects in each render!',
      context
    )
    return createEmptyVNode()
  }
  // object syntax in v-bind
  if (isDef(data) && isDef(data.is)) {
    tag = data.is
  }
  if (!tag) {
    // in case of component :is set to falsy value
    return createEmptyVNode()
  }
  // warn against non-primitive key
  if (process.env.NODE_ENV !== 'production' &&
    isDef(data) && isDef(data.key) && !isPrimitive(data.key)
  ) {
    if (!__WEEX__ || !('@binding' in data.key)) {
      warn(
        'Avoid using non-primitive value as key, ' +
        'use string/number value instead.',
        context
      )
    }
  }
  // support single function children as default scoped slot
  if (Array.isArray(children) &&
    typeof children[0] === 'function'
  ) {
    data = data || {}
    data.scopedSlots = { default: children[0] }
    children.length = 0
  }
  // children 格式化為VNode型別
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children) 
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  // 格式化children後，開始vnode的建立
  let vnode, ns
  if (typeof tag === 'string') { // 標籤是字串型別
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    /**
     * ①：判斷是不是內建的節點，如果是則直接建立一個普通VNode
     * ②：判斷是不是已經註冊過的元件，如果是，則通過createComponent建立一個元件型別的VNode
     * ③：否則建立新的VNode
     */
    if (config.isReservedTag(tag)) { 
      // platform built-in elements
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      // unknown or unlisted namespaced elements
      // check at runtime because it may get assigned a namespace when its
      // parent normalizes children
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    // 非字串型別，呼叫createComponent建立一個元件型別的VNode節點
    // direct component options / constructor
    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()
  }
}

VNode children的VNode化

VNode化的意思是什麼？Virtual DOM 實際上是一個樹狀結構，每一個 VNode 可能會有若干個子節點，這些子節點應該也是 VNode 的型別，由於上邊傳入的children是any型別的，因此需要將children轉為VNode型別。 這個過程用到兩個方法：normalizeChildren(children)、simpleNormalizeChildren(children) 這兩個方法的定義在src/core/vdom/helpers/normalzie-children.js中：

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
}
export function normalizeChildren (children: any): ?Array<VNode> {
  return isPrimitive(children)
    ? [createTextVNode(children)]
    : Array.isArray(children)
      ? normalizeArrayChildren(children)
      : undefined
}

當一個 childrean 包含元件的時候，由於 functional component 函式式元件返回的是一個數組而不是一個根節點，所以需要通過Array.prototype.concat 方法把整個 children 轉化為深度只有一層。

如果children是陣列型別，normalizeChildren方法實際上呼叫的是normalizeArrayChildren方法，該方法在同文件下，原始碼中已經新增關鍵程式碼解釋，如下：

/**
 * 
 * @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++) {
    c = children[i]
    if (isUndef(c) || typeof c === 'boolean') continue
    lastIndex = res.length - 1
    last = res[lastIndex]
    //  nested
    if (Array.isArray(c)) { // 如果子children仍是陣列型別，遞迴呼叫normalizeArrayChildren
      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)) {
        // merge adjacent text nodes
        // this is necessary for SSR hydration because text nodes are
        // essentially merged when rendered to HTML strings
        res[lastIndex] = createTextVNode(last.text + c)
      } else if (c !== '') {
        // convert primitive to vnode
        res.push(createTextVNode(c))
      }
    } else {
      if (isTextNode(c) && isTextNode(last)) {
        // merge adjacent text nodes
        res[lastIndex] = createTextVNode(last.text + c.text)
      } else {
        // default key for nested array children (likely generated by v-for)
        if (isTrue(children._isVList) &&
          isDef(c.tag) &&
          isUndef(c.key) &&
          isDef(nestedIndex)) {
          c.key = `__vlist${nestedIndex}_${i}__`
        }
        res.push(c)
      }
    }
  }
  return res // 得到的是對children規範化後得到的型別為VNode的陣列
}

深夜了，先睡，待更新~~~~~~