What’s New in Vue.js 2.0 - Virtual DOM

You may have heard that Vue.js 2.0 is almost ready. Exciting! One of the main new features is the inclusion of a“virtual DOM” for updating the page.

Note: this article was originally posted here on the Vue.js Developers blog on 2016/09/26

What does the virtual DOM do?

React and Ember both use a virtual DOM to increase the speed of page updates. To understand how it works, let’s discuss a few concepts first:

It’s expensive to update the DOM

When we use Javascript to make a change to our page, the browser has to do some work to find the required DOM nodes and make the change e.g.

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

In modern apps there can be thousands of nodes in the DOM, and so updates can be computationally expensive. It’s inevitable that small, frequent updates will slow the page down.

We can represent DOM nodes “virtually” with Javascript

DOM nodes are normally represented in an HTML document like this:

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

A DOM node can also be represented as a Javascript object, 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
  ]
};

That’s our “virtual” DOM node.

It’s not very expensive to update virtual nodes.

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

If we use a virtual DOM, rather than our code directly calling the DOM API with methods like .getElementById to make updates, the code will make changes just to the JS object which is really quite cheap.

Then, when it’s time to get the real DOM in sync with the changes we’ve made, an efficient updating function is used:

// 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 is adding a virtual DOM in version 2. This is good….right?

Like everything else in life and web development, there are pros and cons to a virtual DOM.

Size - For one, more functionality means more lines in the code package. Fortunately Vue.js 2.0 is still quite small (21.4kb for the current release), and a bunch of stuff is being removed as well.

Memory - Also, a virtual DOM requires an in-memory copy of the DOM to be maintained. A trade-off between DOM updating speed and memory use.

Not good for all use cases - If the virtual DOM is able to batch a large number of changes at once then that’s great. But single, infrequent updates? Virtual DOM would be pointlessly adding pre-computation to any DOM updates.

So if you have a project with a relatively small amount of nodes, would the virtual DOM make any material difference to speed? It’s possible that it would actually make it slower!

But for most single page applications it might be an improvement.

More than performance

Having a virtual DOM it not just a performance enhancement, it means additional functionality will be possible.

For example, you can interact directly with the virtual DOM to create new nodes with 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 this? It gives you the full programmatic power of Javascript. You could create factory-style functions to build your virtual nodes using Javascript’s array methods etc, something that would be more difficult using template syntax.

We give a more thorough explanation and demonstration in this video: