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 13

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.

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

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.js es un enfoque de programación donde describes el **qué** se debe mostrar en la interfaz de usuario en lugar del **cómo** hacerlo. En otras palabras, en lugar de escribir código detallado para manipular directamente el DOM (Document Object Model), defines el estado de los datos y la biblioteca de Vue.js se encarga de renderizar la interfaz de usuario de acuerdo con esos datos.

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.