Vue.js and the Virtual DOM
On the topic of performance improvements, let's consider why Vue.js makes extensive use of the Virtual DOM to render our elements on the screen. Before looking at the Virtual DOM, we need to have a foundational understanding of what the DOM actually is.
DOM
The DOM is what is used to describe the structure of an HTML or XML page. It creates a tree-like structure that provides us with the ability to do everything from creating, reading, updating, and deleting nodes to traversing the tree and many more features, all within JavaScript. Let's consider the following HTML page:
<!DOCTYPE html> <html lang="en"> <head> <title>DOM Example</title> </head> <body> <div> <p>I love JavaScript!</p> <p>Here's a list of my favourite frameworks:</p> <ul> <li>Vue.js</li> <li>Angular</li> <li>React</li> </ul> </div> <script src="app.js...
