Vue virtual Dom to real Dom conversion

There is another tree structure Javascript object, all we need to do is to tell this tree to be real The Dom tree forms a mapping relationship. Let’s review the previous mountComponent method:

export function mountComponent(vm, el) {
  vm.$el = el
  ...
  callHook(vm, 'beforeMount')
  ...
  const updateComponent = function () {
    vm._update(vm._render())
  }
  ...
}

We have executed the vm._render method and obtained the VNode. Now we pass it as a parameter to the vm._update method and execute it. The function of the vm._update method is to convert a VNode into a real Dom, but it has two execution times:

First Render

When new Vue is executed, it is the first rendering, and the incoming Vnode object will be mapped to the real Dom.

Update Page

Data changes will drive page changes, which is one of the most unique features of Vue. Two VNodes are generated before and after the data changes for comparison. How to make the smallest changes to the old VNode to render the page, such a diff algorithm is quite complicated. If we don't first make it clear what data responsiveness is, it will not be good for us to understand the overall process of Vue by directly using diff. So after this chapter analyzes the first rendering, the next chapter is data responsiveness, and then diff comparison.

Let's first look at the definition of the vm._update method:

Vue.prototype._update = function(vnode) {
  ... First rendering vm.$el = vm.__patch__(vm.$el, vnode) // Overwrite the original vm.$el
  ...
}

The vm.el here was mounted previously in the mount Component method, a real D om element. The first rendering will pass in vm.el, which was previously mounted in the ==mountComponent== method, a real ==Dom== element. The first rendering will pass in vm. el, which was previously mounted in the ==mountComponent== method, a real ==Dom== element. The first rendering will pass in vm.el and the resulting VNode, so look at the vm.patch definition:

Vue.prototype.__patch__ = createPatchFunction({ nodeOps, modules })

patch is a method returned by the createPatchFunction method, which accepts an object:

nodeOps attribute: encapsulates a collection of methods for operating native Dom, such as creation, insertion, and removal. Let’s explain them in detail where they are used.

modules attributes: Creating a real Dom also requires generating its attributes such as class/attrs/style. modules is an array collection, each item in the array is the hook method corresponding to these attributes. The creation, update, and destruction of these attributes all have corresponding hook methods. When something needs to be done at a certain moment, just execute the corresponding hook. For example, they all have the create hook method. If these create hooks are collected into an array, when these attributes need to be created on the real Dom, each item in the array is executed in turn, that is, they are created in turn.

PS: The hook methods in the modules attribute here are platform-specific. Web, weex and SSR call VNode methods in different ways, so Vue uses function currying again to smooth out the platform differences in createPatchFunction, so that the patch method only needs to receive the new and old nodes.

Generate Dom

Here you just need to remember one sentence, no matter what type of node VNode is, only three types of nodes will be created and inserted into the Dom: element nodes, comment nodes, and text nodes.

Let's take a look at createPatchFunction and see what kind of method it returns:

export function createPatchFunction(backend) {
  ...
  const { modules, nodeOps } = backend // Deconstruct the incoming collection return function (oldVnode, vnode) { // Receive new and old vnodes
    ...
    const isRealElement = isDef(oldVnode.nodeType) // Is it a real Dom?
    if(isRealElement) { // $el is the real DOM
      oldVnode = emptyNodeAt(oldVnode) // Convert to VNode format and overwrite itself}
    ...
  }
}

There is no oldVnode when rendering for the first time. OldVnode is $el, a real dom, which is wrapped by the emptyNodeAt(odVnode) method:

function emptyNodeAt(elm) {
  return new VNode(
    nodeOps.tagName(elm).toLowerCase(), // Corresponding tag attribute {}, // Corresponding data
    [], // corresponding to children
    undefined, //corresponding to text
    elm // The real DOM is assigned to the elm attribute)
}

After packaging:
{
  tag: 'div',
  elm: '<div id="app"></div>' // real dom
}

-------------------------------------------------------

nodeOps:
export function tagName (node) { // Return the tag name of the node return node.tagName  
}

After converting the passed ==$el== attribute to VNode format, we continue:

export function createPatchFunction(backend) { 
  ...
  
  return function (oldVnode, vnode) { // Receive old and new vnodes
  
    const insertedVnodeQueue = []
    ...
    const oldElm = oldVnode.elm //The real Dom after packaging <div id='app'></div>
    const parentElm = nodeOps.parentNode(oldElm) // The first parent node is <body></body>
  	
    createElm( // Create a real Dom
      vnode, // The second parameter insertedVnodeQueue, // Empty array parentElm, // <body></body>
      nodeOps.nextSibling(oldElm) // next node)
    
    return vnode.elm // Return the real Dom to overwrite vm.$el
  }
}
                                              
------------------------------------------------------

nodeOps:
export function parentNode (node) { // Get the parent node return node.parentNode 
}

export function nextSibling(node) { // Get the next node return node.nextSibling  
}

The createElm method starts to generate the real Dom. The way VNode generates the real Dom is still divided into two ways: element node and component, so we use the VNode generated in the previous chapter to explain them separately.

1. Element node generates Dom

{ // Element node VNode
  tag: 'div',
  children: [{
      tag: 'h1',
      children: [
        {text: 'title h1'}
      ]
    }, {
      tag: 'h2',
      children: [
        {text: 'title h2'}
      ]
    }, {
      tag: 'h3',
      children: [
        {text: 'title h3'}
      ]
    }
  ]
}

You can first look at this flowchart to get an impression, and then look at the specific implementation and the idea will be much clearer (here I will borrow a picture from the Internet):

Let's start with Dom and look at its definition:

function createElm(vnode, insertedVnodeQueue, parentElm, refElm, nested, ownerArray, index) { 
  ...
  const children = vnode.children // [VNode, VNode, VNode]
  const tag = vnode.tag // div
  
  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
    return // If the component result returns true, it will not continue. CreateComponent will be explained in detail later.
  }
  
  if(isDef(tag)) { // Element Node vnode.elm = nodeOps.createElement(tag) // Create Parent Node createChildren(vnode, children, insertedVnodeQueue) // Create Child Node insert(parentElm, vnode.elm, refElm) // Insert } else if(isTrue(vnode.isComment)) { // Comment Node vnode.elm = nodeOps.createComment(vnode.text) // Create Comment Node insert(parentElm, vnode.elm, refElm); // Insert into Parent Node } else { // Text Node vnode.elm = nodeOps.createTextNode(vnode.text) // Create Text Node insert(parentElm, vnode.elm, refElm) // Insert into Parent Node }
  
  ...
}

------------------------------------------------------------------

nodeOps:
export function createElement(tagName) { // Create a node return document.createElement(tagName)
}

export function createComment(text) { //Create comment node return document.createComment(text)
}

export function createTextNode(text) { // Create a text node return document.createTextNode(text)
}

function insert (parent, elm, ref) { //Insert DOM operation if (isDef(parent)) { // There is a parent node if (isDef(ref)) { // There is a reference node if (ref.parentNode === parent) { // The parent node of the reference node is equal to the passed parent node nodeOps.insertBefore(parent, elm, ref) // Insert elm before the reference node in the parent node
      }
    } else {
      nodeOps.appendChild(parent, elm) // Add elm to parent}
  } // Do nothing if there is no parent node}
This is a relatively important method because it is used in many places.

Determine whether it is an element node, comment node, or text node in turn, create them respectively, and then insert them into the parent node. Here we mainly introduce the creation of element nodes, and the other two do not have complicated logic. Let's look at the createChild method definition:

function createChild(vnode, children, insertedVnodeQueue) {
  if(Array.isArray(children)) { // is an array for(let i = 0; i < children.length; ++i) { // traverse each vnode createElm( // recursively call children[i], 
        insertedVnodeQueue, 
        vnode.elm, 
        null, 
        true, //Not the root node to insert children, 
        i
      )
    }
  } else if(isPrimitive(vnode.text)) { //typeof is one of string/number/symbol/booleannodeOps.appendChild( // Create and insert into the parent nodevnode.elm, 
      nodeOps.createTextNode(String(vnode.text))
    )
  }
}

-------------------------------------------------------------------------------

nodeOps:
export default appendChild(node, child) { // Add child nodenode.appendChild(child)
}

Start creating child nodes, traverse each item of VNode, and use the previous createElm method to create Dom for each item. If an item is an array, continue to call createChild to create a child node of the item; if an item is not an array, create a text node and add it to the parent node. Like this, use recursion to create all nested VNodes as real Doms.

After looking at the flowchart, you should be able to reduce a lot of doubts (here I borrow a chapter picture from the Internet):

To put it simply, it is to create real Dom one by one from the inside out, and then insert it into its parent node, and finally insert the created Dom into the body to complete the creation process. The creation of element nodes is relatively simple. Next, let's see how to create the component type.

Component VNode generates Dom

{ // Component VNode
  tag: 'vue-component-1-app',
  context: {...},
  componentOptions: {
    Ctor: function(){...}, // Subcomponent constructor propsData: undefined,
    children: undefined,
    tag: undefined
  },
  data: {
    on: undefined, // native event hook: { // component hook init: function(){...},
      insert: function(){...},
      prepatch: function(){...},
      destroy: function(){...}
    }
  }
}

-------------------------------------------

<template> // Template in app component <div>app text</div>
</template>

First, let’s take a look at a simple flow chart. Just leave an impact to make it easier to sort out the logical order later (here I borrow a picture from the Internet):

Use the components in the previous chapter to generate VNode, and see how the component Dom branch logic is created in createElm:

function createElm(vnode, insertedVnodeQueue, parentElm, refElm) { 
  ...
  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) { // Component branch return  
  }
  ...

Execute the createComponent method. If it is an element node, nothing will be returned, so it is undefined, and the next logic of creating a meta node will continue. Now it's the component. Let's look at the implementation of createComponent:

function createComponent(vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data
  if(isDef(i)) {
    if(isDef(i = i.hook) && isDef(i = i.init)) {
      i(vnode) // Execute init method}
    ...
  }
}

First, the component's vnode.data will be assigned to i. Whether this attribute exists can be used to determine whether it is a component vnode. The following if(isDef(i = i.hook) && isDef(i = i.init)) combines judgment and assignment into one. The i(vnode) in the if is the component init(vnode) method that is executed. At this time, let's take a look at what the component's init hook method does:

import activeInstance // global variables const init = vnode => {
  const child = vnode.componentInstance = 
    createComponentInstanceForVnode(vnode, activeInstance)
  ...
}

activeInstance is a global variable, which is assigned to the current instance in the update method. It is passed in as the parent instance of the component during the patch process of the current instance, and the component relationship is established during the initLifecycle of the child component. The result of createComponentInsanceForVnode is assigned to vnode.componentInstance, so let's see what it returns:

export createComponentInstanceForVnode(vnode, parent) { // parent is the global variable activeInstance
  const options = { // Component options
    _isComponent: true, // Set a flag to indicate that it is a component _parentVnode: vnode, 
    parent // The parent vm instance of the child component, so that the initialization initLifecycle can establish a parent-child relationship}
  
  return new vnode.componentOptions.Ctor(options) // The constructor of the subcomponent is defined as Ctor
}

In the init method of the component, the craeeteComponentInstanceForVnode method is first executed. The constructor of the subcomponent will be instantiated inside this method. Because the constructor of the subcomponent inherits all the capabilities of the base class Vue, this is equivalent to executing new Vue({…}). Next, the ==_init method will be executed to perform a series of subcomponent initialization logic, and then return to the _init== method, because there are still some differences between them:

Vue.prototype._init = function(options) {
  if(options && options._isComponent) { // Component merge options, _isComponent is the previously defined marker initInternalComponent(this, options) // The distinction is because the merged items of the components will be much simpler}
  
  initLifecycle(vm) // Establish parent-child relationship...
  callHook(vm, 'created')
  
  if (vm.$options.el) { // The component does not have an el attribute, so stop here vm.$mount(vm.$options.el)
  }
}

----------------------------------------------------------------------------------------

function initInternalComponent(vm, options) { // Merge subcomponent options
  const opts = vm.$options = Object.create(vm.constructor.options)
  opts.parent = options.parent // component init assignment, global variable activeInstance
  opts._parentVnode = options._parentVnode // component init assignment, component vnode 
  ...
}

Everything was executed well before, but in the end, because there was no el attribute, it was not mounted and the createComponentInstanceForVnode method was executed. At this time, we return to the component's init method and complete the remaining logic:

const init = vnode => {
  const child = vnode.componentInstance = // Get the component instance createComponentInstanceForVnode(vnode, activeInstance)
    
  child.$mount(undefined) // Then mount manually}

We manually mount this component in the init method, and then execute the component's ==render()== method to get the element node VNode in the component, and then execute vm._update() to execute the component's patch method. Because the $mount method passes in undefined, oldVnode is also undefined, and the logic in __patch_ will be executed:

return function patch(oldVnode, vnode) {
  ...
  if (isUndef(oldVnode)) {
    createElm(vnode, insertedVnodeQueue)
  }
  ...
}

This time, createElm is executed without passing in the third parameter parent node. So where should the Dom created by the component be placed to take effect? There is no parent node page to generate Dom. At this time, the component patch is executed, so the parameter vnode is the vnode of the element node in the component:

<template> // Template in app component <div>app text</div>
</template>

-------------------------

{ // element vnode in app
  tag: 'div',
  children: [
    {text: app text}
  ],
  parent: { // The relationship established by executing initLifecycle when the subcomponent is init tag: 'vue-component-1-app',
    componentOptions: {...}
  }
}

Obviously, it is not a component at this time. Even if it is a component, it doesn’t matter. At most, we still need to execute the logic of createComponent to create the component, because there will always be components composed of element nodes. At this time, we execute the logic of creating element nodes. Because there is no third parameter parent node, the component's Dom is created but will not be inserted here. Please note that at this time the component's init has been completed, but the component's createComponent method has not been completed. Let's complete its logic:

function createComponent(vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data;
  if (isDef(i)) {
    if (isDef(i = i.hook) && isDef(i = i.init)) {
      i(vnode) // init has been completed}
    
    if (isDef(vnode.componentInstance)) { //Assigned when executing component init initComponent(vnode) //Assign real dom to vnode.elm
      
      insert(parentElm, vnode.elm, refElm) // Component Dom is inserted here...
      return true // So it will return directly
    }
  }
}

-----------------------------------------------------------------------

function initComponent(vnode) {
  ...
  vnode.elm = vnode.componentInstance.$el // The real dom returned by __patch__
  ...
}

No matter how deeply the components are nested, init will be executed when a component is encountered. If a nested component is encountered during the patch process of init, the init of the nested component will be executed again. After the nested component completes __patch__, the real Dom will be inserted into its parent node. Then, after the patch of the outer component is executed, it will be inserted into its parent node again, and finally inserted into the body to complete the creation process of the nested component. In short, it is a process from the inside out.

Looking back at this picture, I believe it will be easy to understand:

Then complete the logic after the initial mountComponent in this chapter:

export function mountComponent(vm, el) {
  ...
  const updateComponent = () => {
    vm._update(vm._render())
  }
  
  new Watcher(vm, updateComponent, noop, {
    before() {
      if(vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }   
  }, true)
  
  ...
  callHook(vm, 'mounted')
  
  return vm
}

Next, updateComponent will be passed into a Watcher class. We will introduce what this class does in the next chapter. Next the mounted hook method is executed. At this point, the entire process of new vue is complete. Let's review the execution order starting from new Vue:

new Vue ==> vm._init() ==> vm.$mount(el) ==> vm._render() ==> vm.update(vnode) 

Finally, we end this chapter with a question:

The parent and child components both define four hooks: beforeCreate, created, beforeMounte, and mounted. What is their execution order?

answer:

First, the initialization process of the parent component will be executed, so beforeCreate and created will be executed in sequence. Before mounting, the beforeMount hook will be executed again. However, when encountering nested child components in the __patch__ process of generating the real DOM, it will turn to execute the child component's initialization hooks beforeCreate and created. The child component will execute beforeMounte before mounting, and then execute mounted after completing the Dom creation of the child component. The patch process of the parent component is completed, and finally the mounted hook of the parent component is executed. This is their execution order. as follows:

parent beforeCreate
parent created
parent beforeMounte
    child beforeCreate
    child created
    child beforeMounte
    child mounted
parent mounted

This is the end of this article about the conversion of Vue virtual Dom to real Dom. For more relevant Vue virtual Dom to real Dom content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!