La reactividad en vuejs es una característica fundamental que permite que la interfaz de usuario se actualice automáticamente cuando cambian datos. En VueJS, la reactividad se logra principalmente con la Composition API (aunque la Options API también es reactiva). A continuación, se explica cómo añadir reactividad en VueJS usando la Composition API.
Fundamentos de la reactividad en VueJS 3
VueJS 3 usa el sistema de reactividad basado en Proxies, que permite rastrear cambios en objetos y arrays. Para hacer que una variable o un objeto sea reactivo, se utilizan funciones como ref, reactive, computed y otras proporcionadas por VueJS.
Métodos principales para añadir reactividad
ref: Crea una referencia reactiva para un valor primitivo (como un string, número, booleano, etc.). Se accede al valor y se modifica a través de la propiedad .value. Ideal para datos simples. Ejemplo
reactive: Crea un objeto reactivo (o array) donde todas sus propiedades son rastreadas automáticamente. No necesita ".value"!, pero solo funciona con objetos. Ejemplo
computed: Crea propiedades calculadas que dependen de otros datos reactivos y se actualizan automáticamente cuando cambian sus dependencias. Ejemplo
watch: Observa cambios en datos reactivos y ejecuta una función cuando cambian. Ejemplo
