Vue.js 2 Design Patterns and Best Practices

Virtual DOM

Updating DOM nodes is computationally expensive and depending on the size of your application, this can substantially slow down the performance of your application. The Virtual DOM takes the concept of the DOM and provides us an abstraction, which allows for a diffing algorithm to be used to update DOM nodes. To fully take advantage of this, these nodes are no longer accessed with the document prefix and instead are often represented as JavaScript objects.

This allows Vue to work out exactly what changed and only re-render items in the actual DOM that is different from the previous.