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 12

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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/vue@next"></script>
    <script>

        const { createApp } = Vue;

        const app = createApp({

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


        });

        app.mount("#app");

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

El script que usa el profe para mayor agilidad
<script src=鈥https://unpkg.com/vue@next鈥></script>

Lo que no me gusta de este curso es que el c贸digo se ve super peque帽o 馃槮

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.

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.

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.

Esta es la mejor explicacion que he escuchado respecto al DOM y Virtual DOM

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>

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.