Many things are going to change with the coming of Vue 3, and for that, it is very important to have some basic knowledge and to know the principles on which Vue 3 is based. It is a very theoretical entry, but vital to understand everything that happens within “vue”.
What is the Document Object Model, or DOM
El DOM is essentially a platform interface that provides a standard set of objects for representing HTML, XHTML and XML documents, a standard model of how these objects can be combined, and a standard interface for accessing and manipulating them.
The DOM is composed of a series of nodes, which can be modified using Javascript.
let item = document.getElementsByTagName(“h1”)[0];
item.textContent = “New content”
But the DOM can have many, perhaps thousands of nodes, so modifying or searching for one or more nodes can be a daunting task, and is a slow process. Some frameworks, such as VueJS, try to make the job easier to find and manipulate particular nodes in a certain way.
Virtual DOM
Virtual DOM is a representation of the current DOM as Javascript’s objects. A simple div such as <div>Manejando datos</div> can be representad in a virtual node this way:
{ tag: ‘div’,
children: [
{ text: ‘Manejando datos’ }
] }
One of the virtues of Vue 3 is precisely that: taking a virtual object and being able to represent it in the browser
Vue 3 is able to create virtual nodes from component templates, and also be able to represent them in the browser. This is precisely what the render function does.
A render function can have this code:
render(h) {
return h(‘div’, ‘Manejando datos’)
}
When the component changes, the render function is executed again, creating a new virtual node. Another component of Vue will be in charge of comparing both nodes in a very efficient way to send only the changes to the browser.
The process of creating a node in the browser is expensive in time and memory, so it is better to try to do it in the most efficient way and with the minimum amount of work: that is the work we entrust to Vue 3.
VueJs 3 engine
So, Vue 3 engine is designed by integrating three modules, that are:
Reactivity Module
It is the module that creates the reactive Javascript objects that can be watched for changes.
Compiler Module
This module has the target of studying the templates and create render functions with them.
Although it usually happens in the browser, it also happens when you run “build” from NodeJS. The aim is to have the render functions ready instead of the templates to be more efficient.
Render Module
It is the module that has 3 different functions for the rendering of the different functions on the web page. The functions are:
- Render Phase: is where the render functions are transformed into a virtual node
- Mount Phase: is where the virtual node becomes a web page
- Patch Phase: is where the comparison between the old virtual node and the new virtual node is made, and only updates those parts of the web page that have changed through Javascript calls.
How Vue 3 works
I’m going to try to explain what the process is that happens when we try to display a component in the browser, which has a template and a reactive object that is used by the template.
First, the Compiler Module comes into play, which transforms the HTML code of the template into a render function. Then, the reactive objects are initialized using the reactivity module.
Later on, inside the rendering module, the Render Phase is started which involves the render function, which in turn is referred to the reactive objects, which are being watched for changes. The virtual node is created and from the Mount Phase, it is sent to the web page.
If there is a change in the reactive object, the render function is invoked again to create a new virtual node, which together with the old one, are sent to the patch function, and this is the one that sends the updates to the web page, on demand.
To be honest, I must admit that I have never created any component in Vue 2 using the render functions (and you can do it!), because I think that the fact of using HTML templates is too juicy to muddy you up creating very long render functions (that’s what Vue does!!!). Maybe, now that I understand the engine better, you can see why it is there, ready to be used (actually, it is used but we are not aware of it!).
And that’s all by now. Learn this concepts before starts using Vue 3. Happy coding!