Reactividad en Vue: $set y Object.assign

La reactividad en View.js es la base de interfaces dinámicas y rápidas. Aquí entenderás con claridad cómo se rastrean dependencias, cómo se actualiza la vista y cómo resolver las excepciones con this.$set y Object.assign para mantener todo reactivo.

¿Qué es la reactividad en View.js y cómo actualiza la vista?

La reactividad permite que el framework detecte qué cambió y propague esos cambios para actualizar las vistas de forma dinámica. Cuando agregas propiedades en el objeto de la función data, View crea getters y setters para cada una.

• Esto habilita el tracking de dependencias y la notificación cuando cambian.
• Cada componente tiene un watcher (un observable) que monitorea dependencias.
• Al detectar cambios, avisa a la función de render para actualizar en pantalla.

Así se encadenan: data con getters/setters, watcher que observa, y render que pinta los cambios. Resultado: componentes que se actualizan sin intervención manual.

¿Por qué el Virtual DOM mejora la performance al renderizar?

El Virtual DOM es una representación en memoria del DOM. Es clave porque el document object model nativo es costoso al realizar mutaciones. Allí suele estar el cuello de botella de la performance.

• El Virtual DOM minimiza mutaciones sobre el DOM real.
• Compara representaciones y aplica solo los cambios necesarios.
• Así se obtienen mejores tiempos de renderizado y actualización.

En síntesis, la combinación de reactividad y Virtual DOM hace que View sea muy performante al aplicar cambios en la vista.

¿Qué limitaciones tiene la reactividad y cómo solucionarlas con $set y Object.assign?

Hay dos límites importantes a tener en cuenta para evitar “cambios invisibles” que el watcher no detecta:

• data como función: siempre debe ser una función que retorna un objeto. Si fuera un objeto compartido, múltiples instancias usarían el mismo estado y mostrarían la misma información.
• propiedades declaradas al inicializar: toda propiedad que usarás debe declararse desde el inicio, aunque sea con valores por defecto como null, cadena vacía o 0.

Cuando intentas agregar una propiedad nueva a un objeto ya existente (por ejemplo, sumar last name a person), View no la vuelve reactiva si no existía al iniciar. Para resolverlo, tienes dos caminos.

¿Cómo declarar data para estados únicos?

• Usa una función que retorne un objeto nuevo por instancia.
• Declara todas las propiedades que vas a usar, incluso si aún no tienen valor útil.

export default {
  data() {
    return {
      person: { name: 'Ignacio' } // declara aquí lo necesario.
    };
  }
};

¿Cómo agregar una propiedad reactiva con $set?

Emplea la función del framework this.$set: recibe el objeto, el nombre de la propiedad y su valor. Así la nueva propiedad se vuelve reactiva.

methods: {
  addProp() {
    // objeto, nombre de la propiedad, valor.
    this.$set(this.person, 'lastName', 'Anaya');
  }
}

• Ventaja: asegura reactividad al crear propiedades nuevas.
• Uso recomendado para añadir propiedades puntuales.

¿Cómo extender varias propiedades con Object.assign de ECMAScript 2015?

Si necesitas agregar varias propiedades a la vez, crea un objeto nuevo con Object.assign y así fuerzas la reactividad al reemplazar la referencia.

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

• patrón: objeto destino vacío, luego el objeto a extender, y por último lo que incorporas.
• Ventaja: en una línea agregas múltiples propiedades y mantienes reactividad.

¿Tienes dudas sobre algún paso o quieres compartir tu caso? Deja tu comentario y conversemos.