¿Qué es la reactividad?

En el contexto de Vue, la reactividad es la capacidad de rastrear los cambios en los datos y actualizar la interfaz de usuario (UI) de manera eficiente. Cuando declaras datos reactivos, Vue los convierte en "reactivos" y los asocia con dependencias que necesitan ser notificadas cuando esos datos cambien.

import { reactive } from "vue";

const state = reactive({
  counter: 0,
});

state.counter++; // Esto actualiza automáticamente la UI si está vinculada a 'state.counter'.

Vue 3 utiliza Proxies para implementar la reactividad. Un Proxy es una funcionalidad de JavaScript que permite interceptar y redefinir operaciones como acceso, escritura o eliminación de propiedades en un objeto.

Ejemplo sencillo de Proxy

const handler = {
  get(target, key) {
    console.log(`Accediendo a ${key}`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`Modificando ${key} a ${value}`);
    target[key] = value;
    return true;
  }
};

const reactiveObject = new Proxy({ name: "Vue", version: 3 }, handler);

console.log(reactiveObject.name); // Accediendo a name
reactiveObject.version = 4;      // Modificando version a 4

En Vue 3, este mismo principio se aplica para transformar objetos declarados con reactive o ref en estructuras reactivas.

Tipo de reactividad en Vue 3

Reactividad mediante reactive
El método reactive convierte un objeto en un proxy reactivo. Cada vez que accedes o modificas sus propiedades, Vue registra dependencias y notifica a los componentes afectados.

const state = reactive({
  counter: 0,
});

state.counter++; // La UI vinculada a 'state.counter' se actualiza automáticamente.

Reactividad basada en referencias con ref
ref se utiliza para crear valores reactivos simples, como primitivos o estructuras de datos que no necesitan ser objetos complejos.

import { ref } from "vue";

const count = ref(0);

count.value++; // Se accede al valor reactivo a través de '.value'.

Vue utiliza un sistema interno que rastrea las dependencias cuando se accede a las propiedades reactivas. Esto ocurre en el contexto de una función reactiva, como computed o watchEffect.

import { reactive, watchEffect } from "vue";

const state = reactive({
  message: "Hola, Vue!",
});

watchEffect(() => {
  console.log(state.message); // Se ejecuta automáticamente cuando "state.message" cambia.
});

state.message = "Reactividad en acción!";

Ciclo de vida de la reactividad

1. Creación: Los datos iniciales son envueltos en proxies a través de reactive o ref.
2. Registro: Cuando se accede a los datos dentro de un contexto reactivo, Vue registra la relación entre el dato y el efecto asociado (como actualizar la UI).
3. Notificación: Cuando los datos cambian, Vue notifica automáticamente a todos los efectos asociados para actualizarse.

Para más información, puede consultar la documentación oficial de Vue Reactividad en profundidad.