Explore the new virtual Dom_javascript techniques Vue.js 2.0

You may have heard of Vue.js 2.0 already. One of the main exciting new features is the addition of the "virtual dom" of the page.

What can the virtual DOM do?

Both react and Ember use the virtual DOM to increase the refresh rate of the page. To understand how it works, let's start with a few concepts:

It takes a very long time to update the DOM

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

document.getElementById (' MyId '). appendchild (Mynewnode);

There are probably thousands of nodes in the DOM of today's applications, so it takes longer to update. There are many unavoidable small and frequent updates that slow down the page's speed.

We can use JavaScript to virtualize the DOM node to represent

In one HTML, a DOM node usually represents the following:

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

A DOM node can also represent an object in JavaScript, like this:

Pseudo-code of a DOM node represented as Javascript let
domnode = {
tag: ' UL '
attributes: {id: ' myId '}
   children: [
//Where the LI ' s would go
]
};

This is our "virtual" DOM.

There is little overhead in updating virtual nodes

This might is how we update the virtual DOM
domNode.children.push (' <ul>item 3</ul> ');

If we use the virtual DOM instead of calling a similar. getElementById Dom API method directly in code, the operation will be as simple as saving the JS object.

The next step is to update our changes to the real Dom in sync, and we use a very efficient function:

This function would called 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 has added virtual DOM to version 2, which is good ... Right?

Like everything in life and Web development, virtual DOM has its advantages and disadvantages.

Size-one of them is that more functionality means more lines of code in the code package. Luckily, Vue.js 2.0 is still relatively small (current version 21.4kb) and is removing a lot of things.

Memory-again, the virtual DOM needs to keep the existing DOM copy in memory, which is a trade-off between the speed of the DOM update and memory usage.

All cases are not applicable-if the virtual DOM can be modified in batches at once, it is very good. But what if it's a separate, rare update? Any such DOM update will result in a meaningless calculation of the virtual DOM.

So if a project has only a small number of nodes, does using a virtual DOM lead to a qualitative change in speed? It's actually more likely to make it slower!

But for most single page applications, it can also bring about ascension.

Not just performance

Using virtual DOM is more than just a one-time optimization, but it also means bringing in more functionality.

For example, you can use the virtual DOM to create a new node directly 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 do you do this? It brings full programming power to your JavaScript. You can use the JavaScript array method to create a factory function to build your virtual nodes, etc., which can be more complex to handle with template syntax.

The above is a small set to introduce the Vue.js 2.0 new virtual DOM knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!