What is Virtual DOM in Vue. js 2.0 ?, Vue. jsdom

What is Virtual DOM in Vue. js 2.0 ?, Vue. jsdom

What is Virtual DOM?

Previously, React and Ember began to use virtual DOM technology to speed up page updates. If you want to know how it works, you must first recognize these concepts:

1. Updating DOM is very expensive.

When we use Javascript to modify our page, the browser has done some work to find the DOM node for modification, for example:

document.getElementById('myId').appendChild(myNewNode);

In modern applications, there are thousands of DOM nodes. Therefore, the computing generated during update is very expensive. Trivial and frequent updates will slow the page, and this is inevitable.

2. We can use JavaScript objects to replace DOM nodes.

DOM nodes are usually shown in HTML documents as follows:

<ul id='myId'> <li>Item 1</li> <li>Item 2</li><ul>

The DOM node can also be expressed as a JavaScript Object, just like this:

// Use Javascript code to indicate the pseudo code of the DOM node. Let domNode = {tag: 'ul 'attributes: {id: 'myid'} children: [// here is li]};

This is a virtual DOM node.

3. Updating virtual nodes is not expensive

// Update the virtual DOM code domNode. children. push ('<ul> Item 3 </ul> ');

If we use a virtual DOM instead of calling.getElementByIdIn this way, only JavaScript objects are operated, which is quite cheap.

Then, update the modified part to the real DOM using the following method:

// This method calls the dom api to change the real DOM // It will be executed in batches to obtain higher efficiency sync (originalDomNode, domNode );

Is introducing virtual DOM in Vue. js 2.0 a correct choice?

Introducing virtual DOM actually has advantages and disadvantages.

1. Dimensions

More features mean more code. Fortunately, Vue. js 2.0 is still quite small (21.4kb current version ).

2. Memory

The virtual DOM must maintain a copy of the DOM in the memory. Balance Between DOM update speed and memory usage.

3. Not suitable for all situations

This is appropriate if the virtual DOM changes a lot. However, a single, frequently updated virtual DOM will spend more time processing computing work.
Therefore, if you have a DOM node with fewer pages and use virtual DOM, it may actually be slower.
But for most single-page applications, this should be faster.

In addition to performance improvement

Introducing virtual DOM is not only a performance enhancement, but also more functions.

For example, you canrender() Method to directly create a new node:

new Vue({ el: '#app', data: { message: 'hello world' }, render() { var node = this.$createElement; return node( 'div',  { attrs: { id: 'myId' } },  this.message ); }});

Output:

<div id='app'> <div id='myId'>hello world</div></div>

Why? You can use the full programming language JavaScript programming, and you can create a fully functional function to create virtual nodes.

Summary

The above is all the content in this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.