The virtual Dom is a Dom object described by ordinary JS objects

  • The virtual DOM can maintain the state of the program, keeping track of the last state
  • Update the real DOM by comparing the two states

The role of the virtual DOM and virtual libraries

Function:

  • Maintain the relationship between state and view

  • Improved rendering performance in complex view situations

  • cross-platform

    • Browser platforms render the DOM
    • Server render SSR(nuxt.js/Next-js)
    • Native apps (Weex/ReactNative)
    • Applets (MPvue/UniApp)

Diff algorithm in the virtual DOM

  • Find the difference between each node of the two trees

  • Snabbdom optimizes the DIff algorithm

    • DOM manipulation rarely involves cross-level manipulation of nodes

    • Only peer nodes are compared

    • Implementation process

      • OldStartVnode/newStartVnode (old start node/new start node)
      • OldEndVnode /newEndVnode(old end node/new end node)
      • OldStartVnode/newEndVnode (old start node/new end node)
      • OldEndVnode/newStartVnode (old/new start end node)

Old start node/New Start node If old and new are SamevNodes (same key and SEL)

  • Call patchVnode() to compare and update nodes
  • Move the old start and the new start back oldstartix ++/oldEndIdx++

Old end Node/New End Node If the old and new end nodes are not Samevnodes, the system compares the old and new end nodes to see if they are Samevnodes

  • Call patchVnode() to compare and update nodes
  • Move the old end and the new end forward oldStartIdx–/oldEndIdx–

SameVnode calls patchVnode() to compare the differences between the two nodes (text content/child elements) and update the real DOM

SameVnode reuses the DOM element corresponding to the old node. The text content/child element does not perform DOM manipulation.

The old start node/new end node is sameVnode

  • Call patchVnode() to compare and update nodes
  • Move the oldStartVnode dom element to the right and update the index

The old end node/new start node is sameVnode

  • Call patchVnode() to compare and update nodes
  • Move oldEndVnode to the left and update oldEndIdx–/newStartIdx++

If neither of them is satisfied, search for the same node in turn

  • Iterate over the new start node and look for nodes with the same key value in the old node array. If a new start node is not found, it is a new node. Create a DOM element and insert it into the front
  • Find the node with the same key value and determine whether sel is the same or different. Create DOM elements and insert them in the front. Assign the same node to elemToMove.
  • Call patchVnode() to compare and update nodes
  • The DOM element corresponding to elemToMove is moved to the front

End of the cycle

  • When the old child node is traversed first (oldStartIdx>oldEndIdx)

    • New nodes are available. Insert the remaining nodes to the right in batches

  • When the new child node is traversed first (newStartIdx>newEndIdx)

    • Note Old nodes are available. Delete the remaining nodes in batches