[vue] virtual DOM

1. What is virtual DOM

Simply put: virtual DOM is to simulate the DOM structure with JS objects

In fact, virtual DOM is just a layer of abstraction to real DOM . The tree is based on javascript objects, and the properties of objects are used to describe nodes. Finally, this tree can be mapped to the real environment through a series of operations.

In JavaScript objects, the virtual DOM is represented as an object object. And it contains at least three attributes: tag name (tag) , attribute (attrs) and child element object (children) . Different frameworks may have different names for these three attributes

Creating a virtual DOM is to better render virtual nodes into the page view, so the nodes of the virtual DOM object correspond to the properties of the real DOM one by one

Virtual DOM technology is also used in vue

Define the real DOM

<div id="app">
    <p class="p">节点内容</p>
    <h3>{
   
   { foo }}</h3>
</div>

Instantiate vue

const app = new Vue({
    el:"#app",
    data:{
        foo:"foo"
    }
})

According to the render of render, we can get the virtual DOM

(function anonymous() {
	with(this){
        return _c(
            'div',
            {
                attrs:{"id":"app"}
            },
            [_c(
                'p',
                {staticClass:"p"},
				[_v("节点内容")]
            ),
            _v(" "),
            _c('h3',
                [_v(
                    _s(foo)
                )]
            )]
        )
    }
})

Through VNode, Vue can create nodes, delete nodes, and modify nodes for this abstract number. After the diff algorithm , some minimum units that need to be modified are obtained, and then the view is updated, which reduces DOM operations and improves performance.

Second, why do we need virtual DOM

DOM is very slow, its elements are very large, and the performance of the page is also very problematic. Most of them are real DOM nodes caused by DOM operations. Even the simplest div contains many attributes, which can be printed out to have a look

var div = document.createElement('div')
var str = ''
for(var key in div){
    str = str + key + ' '
}
console.log(str)

It can be seen that the cost of operating the DOM is expensive, and frequent operations will cause page freezes, which will affect the user experience

for example

When using the traditional native api or jQuery to manipulate the DOM, the browser will start from the construction of the DOM book and execute the process from the beginning to the end

During the operation, 10 DOM nodes need to be updated. The browser is not so smart. After receiving the first update DOM request, it does not know that there will be 9 subsequent update operations, so the process will be executed immediately, and finally the process will be executed 10 times.

But through VNode, by updating 10 DOM nodes, the virtual DOM will not operate the DOM immediately, but save the 10 updated diff content into a local js object, and finally save the js object in this js object at one time attach to the DOM tree to avoid a lot of unnecessary calculations

Many people think that the biggest advantage of virtual DOM is the diff algorithm, which reduces the performance consumption caused by JavaScript operating real DOM. While this is one advantage a virtual DOM brings, it's not the whole story. The biggest advantage of virtual DOM is that it abstracts the original rendering process and realizes cross-platform capabilities . It is not limited to the DOM of browsers. It can be native components of Android and IOS, small programs that have been very popular recently, or is a variety of GUI

3. How to implement virtual DOM

Real DOM

Virtual DOM

createElement The process of creation VNode , each VNode has one children, and children each element is also one VNode, thus forming a virtual tree structure to describe the real DOMtree structure

1. What is virtual DOM

Second, why do we need virtual DOM

3. How to implement virtual DOM

Guess you like