REF EN VUE.JS: REACTIVIDAD Y EJEMPLOS PRÁCTICOS

En VueJS 3, ref es una de las herramientas principales de la Composition API para crear reactividad en valores primitivos (como números, strings o booleanos) o incluso objetos. A continuación, te explico cómo funciona la reactividad con ref.
  • ref es una función que crea una referencia reactiva para un valor.
  • Se accede al valor y se modifica mediante la propiedad .value en JavaScript.
  • En el template, Vue maneja automáticamente ".value", por lo que no necesitas escribirlo.
  • Cuando el valor de un ref cambia, VueJS detecta el cambio y actualiza la UI automáticamente.
Ejemplo:

<!-- components/RefCounter.vue -->
<template>
  <div class="container">
    <h2>Ejemplo de Reactividad con ref</h2>
    
    <!-- Input vinculado al contador -->
    <div>
 <label>Ingresa un valor:</label>
 <input v-model.number="contador" />
    </code></pre></div>
    
    <!-- Mostrar el contador y su triple -->
    <p>Valor actual: {{ contador }}</p>
    <p>Triple del valor: {{ triple }}</p>
    
    <!-- Botones para modificar -->
    <button @click="incrementar">+1</button>
    <button @click="resetear">Resetear</button>
  </code></pre></div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'RefCounter',
  setup() {
    // Crear una referencia reactiva con ref
    const contador = ref(0);

    // Propiedad computada para calcular el triple
    const triple = computed(() => contador.value * 3);

    // Funciones para modificar el contador
    const incrementar = () => {
 contador.value++; // Modifica el valor reactivo
    };

    const resetear = () => {
 contador.value = 0; // Resetea el valor reactivo
    };

    return {
 contador,
 triple,
 incrementar,
 resetear,
    };
  },
};
</script>

<style scoped>
.container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

div {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  margin-right: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}
</style>



<!-- App.vue -->
<template
  <div>
    <RefCounter />
  </code></pre></div>
</template>
<script>
import RefCounter from './components/RefCounter.vue';

export default {
  components: { RefCounter },
};
</script>

Explicación del código

  • Creación de ref: "const contador = ref(0)" crea una referencia reactiva con un valor inicial de 0. En JavaScript, se usa contador.value para leer o modificar el valor. En el template, se usa directamente contador (por ejemplo, v-model="contador"), ya que VueJS maneja .value automáticamente.
  • Propiedad computada (computed): "triple" es una propiedad computada que calcula "contador.value * 3". Se actualiza automáticamente cuando "contador" cambia, gracias a la reactividad de ref.
  • Modificación reactiva: La función incrementar aumenta "contador.value", lo que actualiza la UI. La función "resetear" establece "contador.value" en 0. El input con "v-model.number" modifica "contador.value" directamente cuando el usuario escribe.
  • Vinculación con la UI: "v-model.number" asegura que el input maneje números y actualice contador reactivamente. Los valores de "contador" y "triple" se reflejan en el template y se actualizan en tiempo real.