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 快速入門 系列