Ref en vue.js: reactividad y ejemplos prácticos

<!-- 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>