Explore virtual DOM added by Vue. js 2.0 and vue. js2.0dom

Explore virtual DOM added by Vue. js 2.0 and vue. js2.0dom

You may have heard about Vue. js 2.0. A major exciting new feature is the addition of "virtual DOM" on the updated page.

What can virtual DOM do?

Both React and Ember use virtual DOM to speed up page refreshing. To understand how it works, let's first discuss several concepts:

It takes a long time to update the DOM.

When we use JavaScript to change the page, the browser has to do some work to find the required DOM node and make changes like this:

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

In today's application DOM, there are about thousands of nodes, so the update takes longer. There are many inevitable small and frequent updates that slow down the page speed.

We can use JavaScript to virtualize the representation of DOM nodes.

In an HTML file, the DOM node is usually expressed as follows:

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

DOM nodes can also represent objects in JavaScript, such:

// Pseudo-code of a DOM node represented as JavascriptLet domNode = {tag: 'ul'attributes: { id: 'myId' }children: [// where the LI's would go]};

This is our "virtual" DOM.

Updating virtual nodes is not costly.

// This might be how we update the virtual DOMdomNode.children.push('<ul>Item 3</ul>');

If we use a virtual DOM instead of calling a dom api method similar to. getElementById in the Code, the operation will be as simple and time-saving as changing the JS object.

Next, we update our changes to the real DOM synchronously. We use a very efficient function:

// This function would call the DOM API and make changes// to the "real" DOM. It would do it in batches and with// more efficiency than it would with arbitrary updates.sync(originalDomNode, domNode);

Vue. js added virtual DOM in version 2, which is quite good... Right?

Just like everything in life and Web development, virtual DOM has both advantages and disadvantages.

Size-one of them is that more features mean more lines of code in the code package. Fortunately, Vue. js 2.0 is still relatively small (the current version is 21.4kb) and many things are being deleted.

Memory-Similarly, the virtual DOM needs to copy the existing DOM and save it in the memory, which is a trade-off between DOM update speed and memory usage.

Not applicable in all cases-it would be nice if the virtual DOM could be modified in batches at one time. But what if it is a separate and rare update? Any such DOM update will bring meaningless pre-calculation to the virtual DOM.

Therefore, if a project has only a small number of nodes, will the use of virtual DOM bring about a qualitative change in speed? In fact, it is more likely to make it slower!

However, for most single-page applications, it will improve.

Not just Performance

Using Virtual DOM is not only a one-time optimization, but also brings more functions.

For example, you can use the virtual DOM to directly create a new node through the render () method:

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? It brings full programming capabilities to your JavaScript. You can use the JavaScript array method to create factory functions to build your virtual nodes and so on, which may be more complicated to process using the template syntax.

The above is a small series of Vue. I hope to help you with the new virtual DOM in js 2.0. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!