Muchas cosas van a cambiar con la llegada en breve de Vue 3, y para ello, es muy importante tener unos conocimientos básicos y conocer los principios sobre los que se asienta Vue 3. Es una entrada muy teórica, pero vital para entender todo lo que ocurre dentro de “vue”.
Qué es el Document Object Model, o DOM
El DOM es esencialmente una interfaz de plataforma que proporciona un conjunto estándar de objetos para representar documentos HTML, XHTML y XML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos.
El DOM está compuesta por una serie de nodos, que pueden ser modificables mediante Javascript.
let item = document.getElementsByTagName(“h1”)[0];
item.textContent = “New content”
Pero el DOM puede tener muchos, quizás miles de nodos, por lo que modificar o buscar uno o varios nodos puede ser una cuestión titánica, y es un proceso lento. Algunos frameworks, como VueJS, tratan de hacer el trabajo más fácil para buscar y manipular nodos concretos de una determinada forma.
DOM Virtual
El DOM virtual es una representación del actual DOM cómo objetos de Javascript. Un simple div tal cómo <div>Manejando datos</div> puede ser representado en un nodo virtual tal que así:
{ tag: ‘div’,
children: [
{ text: ‘Manejando datos’ }
] }
Una de las virtudes de Vue 3 es precisamente esa: tomar un objeto virtual y ser capaz de representarlo en el navegador.
Vue 3 es capaz de crear los nodos virtuales a partir de las plantillas de los componentes (templates), y además, ser capaz de representarlos en el navegador. Precisamente, de esa labor se encarga la función de renderizado (render function).
Una función de renderizado puede ser tal que así:
render(h) {
return h(‘div’, ‘Manejando datos’)
}
Cuando cambia el componente, la render function vuelve a ejecutarse creando un nuevo nodo virtual. Otro componente de Vue será el encargado de comparar ambos nodos de manera muy eficiente para enviar al navegador exclusivamente los cambios.
El proceso en el navegador de crear un nodo es costoso, en tiempo y memoria, por lo que procurar hacerlo de la forma más eficiente y con la mínima cantidad de trabajo: ése es el trabajo que le encargamos a Vue 3.
El corazón de VueJs 3
Así que, Vue 3 tiene un motor que está integrado por 3 módulos:
Reactivity Module
Es el módulo que se encarga de crear los objetos reactivos de Javascript que pueden ser vigilados para los cambios.
Compiler Module
Este módulo tiene la misión de estudiar las plantillas de HTML y convertirlas en render functions.
Aunque sucede normalmente en el navegador, también sucede cuando desde NodeJS se ejecuta “build”. El objetivo es disponer de las render functions en lugar de las plantillas para ser más eficientes.
Render Module
Es el módulo que tiene 3 distintas funciones para el renderizado de las distintas funciones en la página web. Las funciones son:
- Render Phase: es donde se transforma la render functions en un nodo virtual
- Mount Phase: es donde el nodo virtual se convierte en la página web
- Patch Phase: es donde se realiza la comparación entre el anterior nodo virtual y el nuevo nodo virtual, y sólo actualiza aquellas partes de la página web que hayan cambiado mediante llamadas en Javascript.
Cómo funciona Vue 3
Voy a intentar explicar cuál es el proceso que ocurre cuando intentamos mostrar un componente en el navegador, que tiene una plantilla y un objeto reactivo que es usado por la plantilla.
En primer lugar, entra en juego el Compiler Module, que se encarga de transformar el código HTML de la plantilla en una render function. A continuación, los objetos reactivos son inicializados utilizando el módulo de reactividad.
Después, dentro del módulo de renderizado, se inicia la Render Phase que involucra a la render function, que a su vez está referida a los objetos reactivos, que están siendo vigilados por si hubiera cambios. Se crea el nodo virtual y desde Mount Phase, es enviado a la página web.
Si hay una cambio en el objeto reactivo, se invoca de nuevo la función de renderizado para crear un nuevo nodo virtual, que junto con el viejo, se envían a patch function, y ésta es la que envía las actualizaciones a la página web, a demanda.
Si soy sincero, debo admitir que nunca he creado ningún componente en Vue usando las render functions, porque creo que el hecho de utilizar plantillas HTML es demasiado jugoso cómo para enfangarte creando larguísimas funciones de renderizado (de eso, se encarga Vue! y menos mal!!!). Tal vez, ahora que comprendo mejor el motor, puede ver el porqué está ahí, preparado para usarse (en verdad, se usa pero no somos conscientes!).
Y de momento, esto es todo para empezar con Vue 3.