Reactividad y Virtual DOM en Vue.js: Conceptos y Soluciones

Clase 25 de 53 • Curso Profesional de Vue.js 2

Resumen

¿Qué es la reactividad en Vue.js?

El concepto de reactividad es fundamental en Vue.js, haciendo el framework altamente eficiente. La reactividad permite que Vue.js monitorice automáticamente los datos y realice cambios dinámicos en las vistas cada vez que los datos cambian. Se trata de una capacidad que transforma a Vue en un aliado potente para el desarrollo de interfaces interactivas y eficientes.

Las propiedades dentro del objeto de la función data son claves para entender la reactividad. Vue agrega getters y setters para cada propiedad, permitiendo el seguimiento de dependencias y notificando cuándo estas cambian. Cada componente de Vue, o instancia, tiene un watcher que verifica en tiempo real estas dependencias y notifica a la función de renderizado para actualizar la vista cuando detecta cambios.

¿Cómo funciona el Virtual DOM?

Una de las razones por las que Vue.js es tan efectivo es gracias a su uso del Virtual DOM. Este es un concepto que optimiza el rendimiento al crear una representación en memoria del DOM para minimizar las mutaciones directas en el DOM nativo, que pueden ser costosas en términos de rendimiento.

Virtual DOM: Une ideas de frameworks como React al crear una representación ligera del DOM.
Manipulación del DOM nativo es costosa, lo que provoca cuellos de botella en aplicaciones web.

Vue.js utiliza el Virtual DOM para optimizar las actualizaciones de las vistas asegurando un rendimiento más ligero y eficiente.

¿Cuáles son las limitaciones de la reactividad y cómo superarlas?

A pesar de las ventajas de la reactividad en Vue, hay ciertas limitaciones. Una de ellas es la incapacidad de crear propiedades dinámicas en objetos, es decir, Vue no reacciona automáticamente a propiedades que no existían al momento de iniciar la aplicación.

Solución al problema de propiedades dinámicas

Para superar esta limitante, Vue ofrece funcionalidades que permiten extender objetos después de su inicialización de manera reactiva:

Método set de Vue:
```
this.$set(this.person, 'lastName', 'Anaya');
```
Permite agregar y reactivar propiedades de forma individual en un objeto, asegurando que Vue lo monitoree adecuadamente.
Utilizar Object.assign de ECMAScript 2015:
```
this.person = Object.assign({}, this.person, { a: 1, b: 2 });
```
Esta función permite combinar objetos y devolver uno nuevo, con propiedades agregadas de manera reactiva, optimizando el código de manera sencilla y eficiente.

Estas técnicas son claves para asegurar que las aplicaciones de Vue.js mantengan su alta reactividad y rendimiento, permitiendo a los desarrolladores gestionar las propiedades de los objetos con flexibilidad. ¡Sigue explorando y dominando estas herramientas para llevar tus aplicaciones al siguiente nivel!

Aaron Delgado

student•

Al mutar/cambiar una propiedad de un objeto dentro de data, este si cambia pero el watcher nunca se entera de ese cambio por lo tanto no se ve reflejado en la página (no hay reactividad). Hay dos soluciones.

La de vue

// $set es una función del framework

// this.$set(<objeto a agregar una propiedad>, <nombre de la propiedad>, <valor de esa propiedad>) 

this.$set(this.person, 'lastName', 'Anaya')

La de ES6

// Esto va a crear un objeto nuevo y se va a asignar al objeto deseado. agregando lo que hacia falta

// this.person = Object.assign({}, <Objeto que quiero mezclar> , { <Que se va a incorporar> })

this.person = Object.assign({}, this.person, { a: 1, b: 2 })

Nacho Anaya

teacher•

Muy buen resumen!

Cristofer Fuentes Barra

student•

agregaría como tercera solución: no mutar dicha propiedad y declarar todo desde el comienzo 🤔

Carlos Eduardo Gomez García

teacher•

Este problema ya no existe en Vue 3, a partir de Vue 3 ya pueden agregar propiedades a como lo harían normalmente y Vue va a reaccionar sin problemas

Sebastián Buitrago

student•

Is true pueden checarlo en este codesandbox

Christian Armando Consuelo Mayén

student•

Así como agregar elementos que antes no existían con la función Object.assign también podrías agregarlos con el “spread operator”?

Algo así:

this.person = {...this.person, a: 1, b: 2}

Nacho Anaya

teacher•

Si, eso tambien deberia funcionar. Tene en cuenta que para usar el spread necesitas un plugin especifico de babel. En los videos de Vuex vas a ver que lo instalamos ya que tambien nos sirve el spread.

Christian Armando Consuelo Mayén

student•

Muchas gracias, Profesor!

Usted es un crack! Estoy terminando el curso ahora mismo.

jonathan sanchez

student•

¿Cómo es el sistema reactivo en VueJS?

El comportamiento interno de un componente de Vue está muy asentado en el patrón MVVM y en el patrón Observer. Para conseguirlo, Vue presenta un sistema interno como es el siguiente:
Cada vez que instanciamos un componente en nuestra aplicación, Vue se encarga de hacer 3 cosas:

Envuelve los atributos de su objeto de datos (data()) con un método getters y setters que son usados para la obtención y modificación del datos.
Incluye un manejador que observar ante posible cambios de estado interno que es el encargado de rerenderizar vistas.
Cuando tiene esto preparado, renderizar el template con dichos datos interpolados en el DOM.

carlos ruales

student•

Comparto el código con los comentarios necesarios para recordar como funciona cada uno

<template>
    <div>
    <h1>Este es un component hijo</h1>
    <local-component></local-component>
    <localComponent></localComponent>
    <button @click="addProp">Agregar</button>

    <p>{{person}}</p>
    </div>
</template>

<script>
//Se importa el componente
import localComponent from './localComponent.vue'
//Se crea el objeto vue (todos los componentes devuelven un objeto)
export default {
    data(){
        return{
            person: {
                name:'carlos'
            }
        }
    },
    methods: {
        addProp(){
            //this.person.lastName = 'ruales' //MANERA INCORRECTA, NO QUEDA REACTIVO
            //this.$set(this.person,'lastName','ruales') //PARA AGREGAR UNO
            this.person = Object.assign({},this.person,{a:1, b:2}) //Cuando se necesitan agregar varios campos dinamicamente

        }
    },
}
</script>```

Eduardo Pech

student•

Los problemas de reactividad se resuelven con: this.$set(this.objeto, 'nuevaPropiedad', 'valorPropiedad')

La otra forma con Ecmascript 2015 this.objeto = Object.assign({}, this.object, {nuevas propiedades})

Fernando Leonel Poncio González

student•

¿Alguien sabe cómo puedo declarar variables de forma global en el proyecto de Vue.js? Estas variables las necesito para solo lectura.

Omar Jalil Fierro López

student•

Lee un poco acerca de los mixin globales

Alan Lapierre

student•

Vuex te permite gestionar estados globales, es decir, variables globables. Estas variables pueden ser alteradas, y a su vez, cualquier elemento que las utilice va a actuar de forma reactiva. Respondiendo en base al nuevo valor de dicha variable. La opción de usar mixin globables no la he probado, pero imagino que un mixin, al formar parte del código del componente, no te permite usar un estado global. Ya que si, por ejemplo, dos componentes usan el mismo mixin, las variables que este mixin tenga van a poder tener valores independientes (aclaro nuevamente, no se el "mixin global" que nombran funciona así).

Kevin Bello

student•

Una buena opción para dejar claro esta clase es dar ejemplo de casos donde pueda ser necesario en un ámbito profesional, porque hay confusión con que solo es necesario agregar la propiedad ‘lastname’ dentro de data ().

Alejandro González Reyes

student•

Por fin entiendo el porqué de la existencia de $set. Si bien es mejor declarar dicha propiedad del objeto en la data inicial del componente. Puede ser que en la app el usuario quiera agregar mas de un dato a su registro (teléfono 3) y por ende debemos reaccionar al cambio de ese valor de manera reactiva.

Jose Barboza

student•

una forma de hacerlo reactivo es forzarlo con

this.$forceUpdate();

pero puede que no sea una sol efectiva porque mas adelante puede generar más issues

Yefferson Guarnizo

student•

Un tip adicional para tratar el tema de mutabilidad.
para clonar un objeto o un array superficial o llamado tambien “shallow clone” usamos normalmente Object.assign({}, objeto), pero si queremos clonar un objeto o array multidimensional esta funcion no nos va a servir ya que es mas complejo “clonar”, por ende utilizamos el famoso truco JSON. para realizar un “Deep clone”: JSON.parse(JSON.stringify(objeto))

Jesús Mur Fontanals

student•

Empieza a codear