Crea una cuenta o inicia sesión

¬°Contin√ļa aprendiendo sin ning√ļn costo! √önete y comienza a potenciar tu carrera

Declarative rendering con Vue.js

5/37
Recursos

Aportes 11

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Diferencias entre la instancia b√°sica de Vue 2 y Vue 3

Veamos algunas diferencias en la instancia de Vue 2 con la de Vue 3 para que tengamos un mejor panorama de lo nuevo

Vue 2

new Vue({
	el: '#app',
   	data() {
       		message: "Hola vue"    
    	}
});

Vue 3

const app = createApp({
	data() {
		return {
			message: "Hola Vue"
		}
	}
});

app.mount("#app");

Como podemos ver, la principal diferencia esta en la instanciación, en Vue 2, creamos una nueva instancia usando la palabra reservada new seguido de Vue que recibe un objeto con algunas propiedades ya conocidas, para la versión 3 extraemos createApp para tener nuestra instancia. La segunda diferencia esta en el punto de montaje, es decir, donde nuestro contenido dinámico será renderizado, en la versión dos, teníamos la propiedad el en la que indicábamos el identificador de nuestro elemento contenedor, generalmente App, en ****la nueva versión tenemos que llamar mount y pasarle el identificador.

Declarative rendering con Vue.js

Una caracter√≠stica potente que posee Vue, y que tiene un impacto alto en su rendimiento y escalabilidad es su forma eficiente de actualizar el DOM a trav√©s del DOM Virtual. Esto sucede en el proceso de renderizado de nuestros componentes. Pero ¬Ņqu√© rayos es DOM y DOM Virtual? Veamos que significa cada cosa. Cuando nos referimos a DOM o Modelo de objetos de documento nos referimos a una estructura de √°rbol, que contiene una serie de nodos, cada uno de estos nodos representa un elemento de nuestro HTML, un nodo puede tener nodos hijos. Imaginemos un blog, donde existen una serie de art√≠culos, el contenedor de nuestro blog sera un node, y cada articulo representa un nodo hijo. El DOM tiene una serie de m√©todos que nos permiten acceder y cambiar el arbol completo o una parte de √©l, pero estos m√©todos tienen un gran problema y es que mientras mas grande es el DOM usarlos conlleva un mayor esfuerzo y esto afecta el rendimiento de nuestras aplicaciones. Por este motivo usamos el DOM Virtual que es una forma de representar nuestro DOM con objetos de Javascript, la raz√≥n de esto es que trabajar con objetos de javascript es mucho mas sencillo y eficiente. Por tanto, por cada nodo de nuestro DOM podemos crear un nodo virtual.

Vue aprovecha los nodos virtuales para convertirlos en un nodo del DOM. Vue esta pendiente de los cambios que ocurren en cada nodo, cuando ocurre un cambio verifica su nuevo estado con el anterior y decide si debe o no actualizar el DOM. Si se necesita actualizar el DOM, Vue solo actualiza los nodos que sufrieron cambios y el resto permanece intacto, esto es muy importante porque hace que nuestras aplicaciones reaccionen r√°pidamente y actualicen el contenido, ademas de esto Vue esta pendiente de aquellos nodos con propiedades reactivas.

RAYOS ūüėÖ
Aquí se elevó un poco el profesor.
¬ŅQu√© es v-text?
Dentro de la API de VueJS, es una directiva (porque empieza con v) que permite asignar texto a un nodo del DOM o textContent.

Aqu√≠ puede existir muchas confusiones porque ¬Ņno lo hac√≠a v-html? y el contexto es similar aunque √©ste trabaja con elementos HTML directamente o innerHTML

Ahora, hay que dejar claro que las declaraciones v-text son la compilación de la declaración {{ expression }}.

Virtual DOM: Es un objeto que crea Vue de JavaScript que contiene la estructura del DOM, gracias a esto Vue puede observar dicho objeto y renderizar √ļnicamente lo que est√° cambiando (y no renderizar todo el DOM, as√≠ mejoramos el performance). Vue solo actualizar√° aquellos nodos del DOM que tienen una propiedad reactiva.
.
Por lo que veo, v-text es nuevo en Vue 3, aunque también se puede manejar entre llaves:

<span>{{ message }}</span>

Dejo mi código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">

        <span>{{ message }}</span>
        <input type="text" v-model="message">
        
    </div>

    <script src="https://unpkg.com/[email protected]"></script>
    <script>

        const { createApp } = Vue;

        const app = createApp({

            data() {
                return {
                    message: "Hola Vue"
                }
            },


        });

        app.mount("#app");

    </script>
    
</body>
</html>

Para lograr la reactividad Vue cuenta con el Virtual DOM, que es una copia del DOM de la página pe transformado a un objeto de JS, ya que es mucho más fácil de observar y así conocer los cambios que ocurran.

Gracias al virtual DOM, Vue también reconoce cuales son las partes de HTML que están ligadas a un propiedad de Vue y solo a esas son a las que observa para actualizar en caso de que sea necesario.

Lo que no me gusta de este curso es que el c√≥digo se ve super peque√Īo ūüė¶

Ojalá y en futuros cursos, le puedas dar zoom a tu editor de código, es un dolor de cabeza forzar la vista a cada rato para saber que dice.

Codigo. de la clase

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <div id="app">
            <span v-text="message"></span>
            <br>
            <input type="text" v-model="message">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

 
        <script>
            const { createApp } = Vue;

            const app = createApp({
                data() {
                    return {
                        message: "Hola Vue!"
                    };
                }
            });
            app.mount("#app");
        </script>

    </body>
</html>  

Aqui una url del cdn de vue:
<script src=‚Äúhttps://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js‚ÄĚ></script>

DOM => estructura de arbol que representa un documento HTML
Virtual DOM => objeto de js que es creado por vue, es un clon del DOM. Sirve para estar pendiente de los cambios y actualizar cierta cantidad de info de manera dinamica y automatica sin tener que preocuparse por el performance, solo se renderiza lo que cambia.

Declarative Rendering en Vue

Para crear una aplicación de Vue, dentro de lo que es el objeto global de Vue, sacar una función createApp para crear una aplicación de VueJS. Para ello se creará una varia app que recibirá lo que retorne createApp, que recibirá un set de opciones diferentes, de las principales es data, que retorna un objeto que corresponde a toda la información de la aplicación.

    const { createApp } = Vue

    const app = createApp ({
      data() {
        return {
          message: "Hola Vue!"
        }
      }
    })

Lo siguiente es decirle a Vue que la aplicaci√≥n ser√° montada en alg√ļn elemento de HTML:

app.mount("#app")

Directiva v-text corresponde a Innertext.

<span v-text="message"></span>

Directiva v-model modifica el value del input.

<input type="text" v-model="message">

Virtual DOM

VueJS tiene el concepto del Virtual DOM que es un objeto, es un clone del DOM en sí mismo. Vue al copiarlo crea un objeto de JS, Vue puede observar los nodos de la aplicación y observando los cambios que están ocurriendo en cada momento. Gracias a ello Vue puede actualizar la información de manera dinámica, y automática en el browser, sin preocuparse por el performance.

Entonces el browser no se preocupa por renderizar toda la página, ya que solo renderiza lo que está cambiando. Vue lo que hace es comparar las propiedad del objeto de JS del Virtual DOM, entonces Vue se encarga de revisar si la información cambia y si esta debe de renderizarse en el navegador nuevamente. Vue solo actualizará a los nodos específicos dentro del DOM que tienen una propiedad reactiva/dinámica anidada a ellos.

El script que usa el profe para mayor agilidad
<script src=‚Äúhttps://unpkg.com/[email protected]‚ÄĚ></script>