vue 快速入門 系列 —— 虛擬 DOM

彭加李發表於2021-04-02
Vue

其他章節請看：

vue 快速入門 系列

虛擬 DOM

什麼是虛擬 dom

dom 是文件物件模型，以節點樹的形式來表現文件。

虛擬 dom 不是真正意義上的 dom。而是一個 javascript 物件。

正常的 dom 節點在 html 中是這樣表示：

<div class='testId'>
    <p>你好</p>
    <p>歡迎光臨</p>
</div>

而在虛擬 dom 中大概是這樣：

{
    tag: 'div',
    attributes:{
        class: ['testId']
    },
    children:[
        // p 元素
        // p 元素
    ]
}

我們可以將虛擬 dom 拆分成兩部分進行理解：虛擬 + dom。

  • 虛擬: 表示虛擬 dom 不是真正意義上的 dom，而是一個 javascript 物件；
  • dom: 表示虛擬 dom 能以類似節點樹的形式表示文件。

虛擬 dom 的作用

前文（初步認識 vue）提到，現在主流的框架都是宣告式操作 dom 的框架。我們只需要描述狀態與 dom 之間的對映關係即可，狀態到檢視（真實的 dom）的轉換，框架會幫我們做。

最粗暴的做法是將狀態渲染成檢視，每次更新狀態，都重新更新整個檢視。

這種做法的效能可想而知。比較好的想法是：狀態改變，只更新與狀態相關的 dom 節點。虛擬 dom 只是實現這個想法的其中一種方法而已。

具體做法：

  • 狀態 -> 真實 dom（最初）
  • 狀態 -> 虛擬 dom -> 真實 dom（使用虛擬 dom）

狀態改變，重新生成一份虛擬 dom，將上一份和這一份虛擬 dom 進行對比，找出需要更新的部分，更新真實 dom。

vue 中的虛擬 dom

真實的 dom 是由 節點（Node）組成，虛擬 dom 則是由虛擬節點（vNode）組成。

虛擬 dom 在 vue 中主要做兩件事：

  • 提供與真實節點（Node）對應的虛擬節點（vNode）
  • 將新的虛擬節點與舊的虛擬節點進行對比，找出需要差異，然後更新檢視

“虛擬 DOM”是我們對由 Vue 元件樹建立起來的整個 VNode 樹的稱呼 —— vue 官網

vNode

什麼是 vNode

上文提到，vNode（虛擬節點）對應的是真實節點（Node）。

vNode 可以理解成節點描述物件。描述瞭如何建立真實的 dom 節點。

vue.js 中有一個 vNode 類。可以使用它建立不同型別的 vNode 例項，不同型別的 vNode 對應著不同型別的 dom 元素。程式碼如下：

export default class VNode {
   constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
    this.ns = undefined
    this.context = context
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    this.key = data && data.key
    this.componentOptions = componentOptions
    this.componentInstance = undefined
    this.parent = undefined
    this.raw = false
    this.isStatic = false
    this.isRootInsert = true
    this.isComment = false
    this.isCloned = false
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }

  get child (): Component | void {
    return this.componentInstance
  }
}

從程式碼不難看出 vNode 類建立的例項，本質上就是一個普通的 javascript 物件。

vNode 的型別

前面我們已經介紹通過 vNode 類可以建立不同型別的 vNode。而不同型別的 vNode 是由有效屬性區分。例如 isComment = true 表示註釋節點；isCloned = true 表示克隆節點等等。

vNode 型別有：註釋節點、文字節點、克隆節點、元素節點、元件節點。

以下是註釋節點、文字節點和克隆節點的程式碼：

/*
註釋節點
有效屬性：{isComment: true, text: '註釋節點'}
*/
export const createEmptyVNode = (text: string = '') => {
  const node = new VNode()
  node.text = text
  // 註釋
  node.isComment = true
  return node
}
/*
文字節點
有效屬性：{text: '文字節點'}
*/
export function createTextVNode (val: string | number) {
  return new VNode(undefined, undefined, undefined, String(val))
}

// optimized shallow clone
// used for static nodes and slot nodes because they may be reused across
// 用於靜態節點和插槽節點
// multiple renders, cloning them avoids errors when DOM manipulations rely
// on their elm reference.
// 克隆節點
export function cloneVNode (vnode: VNode): VNode {
  const cloned = new VNode(
    vnode.tag,
    vnode.data,
    // #7975
    // clone children array to avoid mutating original in case of cloning
    // a child.
    vnode.children && vnode.children.slice(),
    vnode.text,
    vnode.elm,
    vnode.context,
    vnode.componentOptions,
    vnode.asyncFactory
  )
  cloned.ns = vnode.ns
  cloned.isStatic = vnode.isStatic
  cloned.key = vnode.key
  cloned.isComment = vnode.isComment
  cloned.fnContext = vnode.fnContext
  cloned.fnOptions = vnode.fnOptions
  cloned.fnScopeId = vnode.fnScopeId
  cloned.asyncMeta = vnode.asyncMeta
  // 標記是克隆節點
  cloned.isCloned = true
  return cloned
}

克隆節點其實就是將現有節點的所有屬性賦值到新節點中，最後用 cloned.isCloned = true 標記自身是克隆節點。

元素節點通常有以下 4 個屬性：

  • tag：節點名稱。例如 div、p
  • data：節點上的資料。例如 class、style
  • children：子節點
  • context：在元件內呈現

元件節點與元素節點類似，包含兩個獨有的屬性：

  • componentOptions：元件節點的選項引數，例如propsData、listeners、children、tag
  • componentInstance：元件的例項

patch

前面已經介紹了虛擬 dom 在 vue 中做的第一件事：提供與真實節點（Node）對應的虛擬節點（vNode）；接下來介紹第二件事：將新的虛擬節點與舊的虛擬節點進行對比，找出需要差異，然後更新檢視。

第二件事在 vue 中的實現叫做 patch，即打補丁、修補的意思。通過對比新舊 vNode，找出差異，然後在現有 dom 的基礎上進行修補，從而實現檢視更新。

對比 vNode 找差異是手段，更新檢視才是目的。

而更新檢視無非就是新增節點、刪除節點和更新節點。接下來我們逐一分析什麼時候新增節點、在哪裡新增；什麼時候刪除節點，刪除哪個；什麼時候更新節點，更新哪個；

注：當 vNode 與 oldVNode 不相同的時候，以 vNode 為準。

新增節點

一種情況是：vNode 存在而 oldVNode 不存在時，需要新增節點。最典型的是初次渲染，因為 odlVNode 是不存在的。

另一種情況是 vNode 與 oldVNode 完全不是同一個節點。這時就需要使用 vNode 生成真實的 dom 節點並插入到 oldVNode 指向的真實 dom 節點旁邊。oldVNode 則是一個被廢棄的節點。例如下面這種情況：

<div>
  <p v-if="type === 'A'">
    我是節點A
  </p>
  <span v-else-if="type === 'B'">
    我是與A完全不同的節點B
  </span>
</div>

當 type 由 A 變為 B，節點就會從 p 變成 span，由於 vNode 與 oldVNode 完全不是同一個節點，所以需要新增節點。

刪除節點

當節點只在 oldVNode 中存在時，直接將其刪除即可。

更新節點

前面介紹了新增節點和刪除節點的場景，發現它們有一個共同點：vNode 與 oldVNode 完全不相同。

但更常見的場景是 vNode 與 oldVNode 是同一個節點。然後我們需要對它們（vNode 與 oldVNode）進行一個更細緻的對比，再對 oldVNode 對應的真實節點進行更新。

對於文字節點，邏輯自然簡單。首先對比新舊 vNode，發現是同一個節點，然後將 oldVNode 對應的 dom 節點的文字改成 vNode 中的文字即可。但對於複雜的 vNode，比如介面中的一顆樹元件，這個過程就會變得複雜。

新增節點 - 原始碼分析

思考一下：前面說到 vNode 的型別有：註釋節點、文字節點、克隆節點、元素節點、元件節點。請問這幾種型別都會被建立並插入到 dom 中嗎？

答：只有註釋節點、文字節點、元素節點。因為 html 只認識這幾種。

由於只有上面三種節點型別，根據型別做響應的建立，然後插入對應的位置即可。

以元素節點為例，如果 vNode 有 tag 屬性，則說明是元素節點。則呼叫 createElement 方法建立對應的節點，接下來就通過 appendChild 方法插入到指定父節點中。如果父元素已經在檢視中，那麼把元素插入到它下面將會自動渲染出來；如果 vNode 的 isComment 屬性是 true，則表示註釋節點；都不是則是文字節點；

通常元素裡面會有子節點，所以這裡涉及一個遞迴的過程，也就是將 vNode 中的 children 依次遍歷，建立節點，然後插入到父節點（父節點也就是剛剛建立出的 dom 節點）中，一層一層的遞迴進行。

請看原始碼：

// 建立元素
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
  }

  var data = vnode.data;
  var children = vnode.children;
  var tag = vnode.tag;
  // 有 tag 屬性，表示是元素節點
  if (isDef(tag)) {
    vnode.elm = vnode.ns
      ? nodeOps.createElementNS(vnode.ns, tag)
      // 建立元素。nodeOps 涉及到跨平臺
      : nodeOps.createElement(tag, vnode);
    setScope(vnode);

    /* istanbul ignore if */
    {
      // 遞迴建立子節點，並將子節點插入到父節點上
      createChildren(vnode, children, insertedVnodeQueue);
      if (isDef(data)) {
        invokeCreateHooks(vnode, insertedVnodeQueue);
      }
      // 將 vnode 對應的元素插入到父元素中
      insert(parentElm, vnode.elm, refElm);
    }

  // isComment 屬性表示註釋節點
  } 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);
  }
}

// 遞迴建立子節點，並將子節點插入到父節點上。vnode 表示父節點
function createChildren (vnode, children, insertedVnodeQueue) {
  if (Array.isArray(children)) {
    if (process.env.NODE_ENV !== 'production') {
      checkDuplicateKeys(children);
    }
    // 依次建立子節點，並將子節點插入到父節點中
    for (var 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)));
  }
}

刪除節點 - 原始碼分析

刪除節點非常簡單。直接看原始碼：

// 刪除一組指定節點
function removeVnodes (parentElm, vnodes, startIdx, endIdx) {
  for (; startIdx <= endIdx; ++startIdx) {
    var ch = vnodes[startIdx];
    if (isDef(ch)) {
      if (isDef(ch.tag)) {
        removeAndInvokeRemoveHook(ch);
        invokeDestroyHook(ch);
      } else { // Text node
        // 刪除個節點
        removeNode(ch.elm);
      }
    }
  }
}

// 刪除單個節點
function removeNode (el) {
  var parent = nodeOps.parentNode(el);
  // element may have already been removed due to v-html / v-text
  if (isDef(parent)) {
    // nodeOps裡封裝了跨平臺的方法
    nodeOps.removeChild(parent, el);
  }
}

更新節點 - 原始碼分析

有些複雜，而且涉及子節點更新，本文就不展開。

其他章節請看：

vue 快速入門 系列

相關文章