Vue Virtual DOM Quick Start

Virtual DOM

What is virtual dom

DOM is a document object model that represents documents in the form of a node tree.

Virtual DOM is not a real DOM. Rather, it is a javascript object.

A normal DOM node is represented in HTML like this:

<div class='testId'>
    <p>Hello</p>
    <p>Welcome</p>
</div>

In the virtual DOM, it looks like this:

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

We can split the virtual dom into two parts for understanding: virtual + dom.

• Virtual: means that the virtual DOM is not a real DOM, but a JavaScript object;
• dom: indicates that the virtual dom can represent the document in a node tree-like form.
  

The role of virtual dom

The current mainstream frameworks are all frameworks for declarative DOM operations. We only need to describe the mapping relationship between the state and the DOM. The framework will help us convert the state to the view (the real DOM).

The crudest approach is to render the state into a view, and update the entire view every time the state is updated.

The performance of this approach can be imagined. A better idea is: when the state changes, only the DOM nodes related to the state are updated. Virtual DOM is just one way to implement this idea.

Specific steps:

• State -> Real dom (Initially)
• State -> Virtual DOM -> Real DOM (using virtual DOM)

When the state changes, a new virtual DOM is generated, the previous one is compared with this one, the parts that need to be updated are found, and the real DOM is updated.

Virtual DOM in Vue

The real dom is composed of nodes (Node), and the virtual dom is composed of virtual nodes (vNode).

Virtual DOM mainly does two things in Vue:

• Provides virtual nodes (vNode) corresponding to real nodes (Node)
• Compare the new virtual node with the old virtual node, find the differences, and then update the view
  

"Virtual DOM" is our name for the entire VNode tree built by the Vue component tree - vue official website

vNode

What is vNode

As mentioned above, vNode (virtual node) corresponds to the real node (Node).

vNode can be understood as a node description object. Describes how to create actual DOM nodes

There is a vNode class in vue.js. It can be used to create different types of vNode instances. Different types of vNodes correspond to different types of DOM elements. The code is as follows:

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

It is not difficult to see from the code that the instance created by the vNode class is essentially an ordinary javascript object.

Type of vNode

We have already introduced that different types of vNodes can be created through the vNode class. Different types of vNodes are distinguished by valid attributes. For example, isComment = true indicates a comment node; isCloned = true indicates a cloned node, and so on.

The vNode types include: comment node, text node, clone node, element node, and component node.

Here are the codes for comment node, text node and clone node:

/*
Comment node valid attributes: {isComment: true, text: 'Comment node'}
*/
export const createEmptyVNode = (text: string = '') => {
  const node = new VNode()
  node.text = text
  // Comment node.isComment = true
  return node
}
/*
Valid attributes of text nodes: {text: 'text node'}
*/
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
// For static nodes and slot nodes // multiple renders, cloning them avoids errors when DOM manipulations rely
// on their elm reference.
// Clone node 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
  // Mark the node as cloned.isCloned = true
  return cloned
}

Cloning a node actually assigns all the properties of the existing node to the new node, and finally marks itself as a cloned node with cloned.isCloned = true .

Element nodes usually have the following four attributes:

• tag: node name. For example, div, p
• data: data on the node. For example, class, style
• children: child nodes
• context: rendered within a component
  

Component nodes are similar to element nodes, and contain two unique properties:

• componentOptions: Option parameters of component nodes, such as propsData, listeners, children, tags
• componentInstance: an instance of a component
  

patch

We have already introduced the first thing that virtual DOM does in Vue: providing a virtual node (vNode) corresponding to the real node (Node); next we will introduce the second thing: comparing the new virtual node with the old virtual node, finding the difference, and then updating the view.

The second thing implemented in Vue is called patch, which means patching or repairing. By comparing the old and new vNodes, finding the differences, and then patching them based on the existing DOM, the view is updated.

Comparing vNodes to find differences is a means, and updating the view is the goal.

Updating a view is nothing more than adding nodes, deleting nodes, and updating nodes. Next, we analyze one by one when to add a node and where to add it; when to delete a node and which one to delete; when to update a node and which one to update;

Note: When vNode and oldVNode are different, vNode shall prevail.

Adding a new node

One situation is: when vNode exists but oldVNode does not exist, a new node needs to be added. The most typical one is the initial rendering, because the odlVNode does not exist.

Another case is that vNode and oldVNode are not the same node at all. At this time, you need to use vNode to generate a real dom node and insert it next to the real dom node pointed to by oldVNode. oldVNode is an abandoned node. For example, in the following situation:

<div>
  <p v-if="type === 'A'">
    I am Node A
  </p>
  <span v-else-if="type === 'B'">
    I am a completely different node B than A
  </span>
</div>

When type changes from A to B, the node changes from p to span. Since vNode and oldVNode are not the same node at all, a new node needs to be added.

Deleting a Node

When the node only exists in oldVNode, just delete it.

Update Node

In the previous section, we introduced the scenarios of adding new nodes and deleting nodes. We found that they have one thing in common: vNode is completely different from oldVNode.

But a more common scenario is that vNode and oldVNode are the same node. Then we need to make a more detailed comparison between them (vNode and oldVNode), and then update the real node corresponding to oldVNode.

For text nodes, the logic is naturally simple. First, compare the old and new vNodes and find that they are the same node. Then change the text of the dom node corresponding to oldVNode to the text in vNode. But for complex vNodes, such as a tree component in the interface, this process becomes complicated.

New Node - Source Code Analysis

Think about it: As mentioned earlier, the types of vNode are: comment node, text node, clone node, element node, and component node. Will all of these types be created and inserted into the DOM?

Answer: Only comment nodes, text nodes, and element nodes. Because HTML only recognizes these types.

Since there are only three types of nodes mentioned above, create the corresponding ones according to the types and then insert them into the corresponding positions.

Taking element nodes as an example, if vNode has a tag attribute, it means it is an element node. The createElement method is called to create the corresponding node, and then the appendChild method is used to insert it into the specified parent node. If the parent element is already in view, inserting the element below it will automatically render it; if the isComment property of vNode is true, it indicates a comment node; if neither is true, it indicates a text node;

Usually there will be child nodes in the element, so there is a recursive process involved here, that is, traversing the children in vNode one by one, creating nodes, and then inserting them into the parent node (the parent node is the dom node just created), recursively layer by layer.

Please see the source code:

// Create element 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;
  // Has a tag attribute, indicating it is an element node if (isDef(tag)) {
    vnode.elm = vnode.ns
      ? nodeOps.createElementNS(vnode.ns, tag)
      // Create the element. nodeOps involves cross-platform: nodeOps.createElement(tag, vnode);
    setScope(vnode);

    /* istanbul ignore if */
    {
      // Recursively create child nodes and insert them into the parent node createChildren(vnode, children, insertedVnodeQueue);
      if (isDef(data)) {
        invokeCreateHooks(vnode, insertedVnodeQueue);
      }
      //Insert the element corresponding to vnode into the parent element insert(parentElm, vnode.elm, refElm);
    }

  // isComment property indicates comment node} else if (isTrue(vnode.isComment)) {
    vnode.elm = nodeOps.createComment(vnode.text);
    //Insert parent nodeinsert(parentElm, vnode.elm, refElm);
  // Otherwise it is a child node} else {
    vnode.elm = nodeOps.createTextNode(vnode.text);
    //Insert parent nodeinsert(parentElm, vnode.elm, refElm);
  }
}

// Recursively create child nodes and insert them into the parent node. vnode represents the parent node function createChildren (vnode, children, insertedVnodeQueue) {
  if (Array.isArray(children)) {
    if (process.env.NODE_ENV !== 'production') {
      checkDuplicateKeys(children);
    }
    // Create child nodes one by one and insert them into the parent node 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)));
  }
}

Deleting a node - Source code analysis

Deleting a node is very simple. Look at the source code directly:

// Delete a set of specified nodes 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
        // Delete a noderemoveNode(ch.elm);
      }
    }
  }
}

// Delete a single node function removeNode (el) {
  var parent = nodeOps.parentNode(el);
  // element may have already been removed due to v-html / v-text
  if (isDef(parent)) {
    // nodeOps encapsulates the cross-platform method nodeOps.removeChild(parent, el);
  }
}

The above is the detailed content of the Vue Virtual DOM Quick Start. For more information about Vue Virtual DOM, please pay attention to other related articles on 123WORDPRESS.COM!