Vue 3 Overview
This Vue 3 course with Evan You will help you learn how Vue is put together, so you can more effectively build and scale Vue applications. The majority of it is taught by Evan, but before I hand over the teaching to him, it’s important that you understand some core Vue concepts.
What is the DOM?
Dom stands for Document Object Model, and it’s the our browser’s interface (API) to change what is displayed in the browser.
let item = document.getElementsByTagName("h1");
item.textContent = "New Heading";
This would update our h1 heading.
The Problem with the DOM
What is a Render Function?
When Vue receives a template, before creating a Virtual Node, it first compiles it into a render function. You can see this below:
The render function is what creates the virtual node, which gets sent to Vue to update the DOM. Later, if the data used by the render function changes, the render function will get run again producing a new Virtual DOM Node. Then Vue takes the old and the new node, compares the two, and makes the appropriate DOM calls to change the webpage.
An Analogy of the Virtual DOM
A good way of understanding the Virtual DOM vs the Actual DOM, is blueprints (Virtual DOM) vs the actual building (Actual DOM). If I make changes to the 29th floor of the building, such as changing the layout of the furniture and adding new kitchen cabinets, I can make updates to the building in two ways:
- I can demolish everything on the 29th floor and start from scratch.
- I can create new blueprints, compare the differences, and make updates to the minimal amount of work.
What is the Anatomy of Vue 3?
Vue 3’s core engine is made up of multiple parts.
Compiler Module. This knows how to take HTML templates and compile them into render functions. This can happen in the browser at runtime, but more often happens when a Vue project is built, so that a browser only ever receives render functions.
Renderer Module. The renderer contains the code for 3 different phases of rendering out a component onto a webpage.
Let’s think about a simple component with a template which uses a reactive object. When Vue loads up:
- The Compiler Module changes the HTML into a render function.
- The reactive objects are initialized by the Reactive Module.
- The Renderer Module Render Phase invokes the render function which creates a Virtual DOM object, or VNode. Since our render function references a reactive object, we track the render function to be run again if the reactive object changes.
- In the Mounting Phase the mount function is called, using the VNode to create the webpage.
- When the reactive object is changed, the Patch Phase invokes the render function again, and this time calls patch with the old VNode and the new VNode, which updates only the parts of the page which have changed.