Vue 3: El truco que nadie te contó para un código más limpio

A menudo, trabajando con la Options API de Vue, el código se vuelve engorroso y difícil de mantener cuando la lógica crece.

El truco

// ANTES: Options API
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  }
}

// DESPUÉS: Composition API
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    const doubleCount = computed(() => count.value * 2);

    return { count, increment, doubleCount };
  }
}

Al usar la Composition API, puedes encapsular la lógica de estado (como count) y los métodos (increment) en funciones reutilizables y más fáciles de probar. La reactividad se gestiona mejor con ref y computed, lo que te permite un control más granular y limpio sobre el estado y las computaciones derivadas.

Optar por la Composition API no solo mejora la legibilidad, sino que te abre la puerta a patrones de diseño más sólidos y mantenibles en Vue 3.