Cómo funciona la reactividad en Vue 3

¿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++;

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(`Accessing property ${key}`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`Modifying property ${key} to ${value}`);
    target[key] = value;
    return true;
  }
};

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

console.log(reactiveObject.name); 
reactiveObject.version = 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++;

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++;

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.

<script setup>
import { reactive, watchEffect } from "vue";

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

watchEffect(() => {
  console.log(state.message); // This will run whenever state.message changes
});

state.message = "Reactivity in action!";
</script>

Ciclo de vida de la reactividad

• Creación: Los datos iniciales son envueltos en proxies a través de reactive o ref.
• 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).
• 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.