REACTIVIDAD REACTIVE CON VUEJS
La reactividad con reactive en vuejs toma un objeto JavaScript plano y lo convierte en un objeto reactivo. Esto significa que cualquier cambio en las propiedades de ese objeto será rastreado, y VueJS actualizando automáticamente las partes de la interfaz que dependan de esos datos. Se importa desde VueJS: "import { reactive } from 'vue'.". Se aplica a objetos (no a valores primitivos como números o strings).VueJS utiliza un sistema de reactividad basado en proxies (ES6 Proxy) para envolver el objeto. Esto permite el rastreo de dependencias: VueJS detecta qué partes del código (como el template) dependen de las propiedades del objeto reactivo, también permikte la actualización automática ya que cuando una propiedad del objeto cambia, VueJS notifica a las partes dependientes (como el DOM) para que se actualicen.
Las ventajas de reactive son que simplifica la gestión de estado complejo, como formularios o configuraciones con múltiples propiedades. Permite agrupar datos relacionados en un solo objeto reactivo e integración natural con el sistema de reactividad de VueJS para actualizar la UI.
Características clave de reactive
- Solo para objetos: "reactive" funciona con objetos, arrays o estructuras complejas. No se puede usar con valores primitivos (números, strings, booleanos). Para valores primitivos, se usa ref.
- Mutación directa: Puedes modificar las propiedades del objeto directamente (por ejemplo, state.name = 'Nuevo valor'), y Vue lo detecta.
- Limitaciones: No se puede reasignar el objeto completo (state = {}), ya que esto rompe la reactividad. Solo las propiedades internas son reactivas.
No es ideal para desestructurar, ya que se perdería la reactividad (por ejemplo, const { name } = state no será reactivo).
Ejemplo:
<script>
import { reactive } from 'vue';
export default {
setup() {
// Creamos un objeto reactivo
const state = reactive({
count: 0,
message: 'Hola, Vue!'
});
// Función para modificar el estado
const increment = () => {
state.count++;
state.message = `Contador: ${state.count}`;
};
return {
state,
increment
};
}
};
</script>
<template>
<div>
<p>{{ state.message }}</p>
<button @click="increment">Incrementar</button>
</div>
</template>
</div>
Explicación
- "state" es un objeto reactivo con "count" y "message".
- Al hacer clic en el botón, "increment" modifica "state.count" y "state.message".
- El "template" se actualiza automáticamente para mostrar los nuevos valores.
<script>
import { reactive } from 'vue';
export default {
setup() {
// Creamos un objeto reactivo
const state = reactive({
count: 0,
message: 'Hola, Vue!'
});
// Función para modificar el estado
const increment = () => {
state.count++;
state.message = `Contador: ${state.count}`;
};
return {
state,
increment
};
}
};
</script>
<template>
<div>
<p>{{ state.message }}</p>
<button @click="increment">Incrementar</button>
</div>
</template>
</div>
- "state" es un objeto reactivo con "count" y "message".
- Al hacer clic en el botón, "increment" modifica "state.count" y "state.message".
- El "template" se actualiza automáticamente para mostrar los nuevos valores.