Understanding the Virtual DOM

The DOM (Document Object Model) API is slow...very slow. Web applications have a lot of moving parts to them that require data to be updated instantly. Sometimes your application will react differently depending on the data that was modified. Since the DOM is really slow, your web application could be unusable if the user is updating a lot of data. To solve this problem, Vue.js uses something called a Virtual DOM.

Much like React, Vue.js utilizes a Virtual DOM that makes rendering your application’s user interface lightning fast. A Virtual DOM is a representation or a copy of the actual DOM; it’s also known as a “shadow DOM” and is rendered using JavaScript. In other words, when a change is made in the application, the Virtual DOM compares itself to the real DOM, defines what has changed, and only updates what needs to be changed.

Let’s say in a hypothetical app you have a header, a footer, and a content section. If a user updates some data in the content area of your application, only the content area will be re-rendered, not the header or the footer. Vue.js is smart and efficient enough to only re-render what’s needed, rather than the entire DOM.