Diferencias entre Composition API y Option API en Vue

Con la llegada de Vue.js 3, los desarrolladores nos encontramos con una nueva forma de estructurar nuestro código en componentes, la llamada Composition API, frente a la clásica Option API

Pero pongámonos en contexto con el archiconocido contador en forma de OptionAPI.

<template>
  <div>
    <p>Contador: {{ count }}</p>
    <button @click="increment">Incrementar</button>
    <button @click="decrement">Decrementar</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
};
</script>

Como vemos en el código de arriba, tenemos el estado del componente con el valor count inicializado a 0 y dos métodos que cambian el valor de este estado, aumentando y disminuyendo.

A estos métodos los llamamos desde la vista con el evento click de los botones.

Como cabe esperar, el sistema reactivo de Vue hará que nuestro componente muestre el valor de count y reaccione a los botones.

Ahora veamos el mismo ejemplo con Composition API

<template>
  <div>
    <p>Contador: {{ count }}</p>
    <button @click="increment">Incrementar</button>
    <button @click="decrement">Decrementar</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    const decrement = () => {
      count.value--;
    };

    return {
      count,
      increment,
      decrement
    };
  }
};
</script>

En este caso habrás notado ya algunas diferencias, la primera de ellas es la importación de ref de la librería de vue.

Con ref lo que hacemos es indicar qué elemento es reactivo y aquí tenemos una de los importantes cambios al usar Composition API. Si bien con Option API todo nuestro componente era reactivo, ahora somos nosotros quienes decidimos que datos son reactivos. Esto puede ser un factor clave en aplicaciones donde el rendimiento sea crítico.

Otro de los puntos que observamos es que al estar envuelto en ref, necesitamos usar .value para acceder a su valor. Este punto es muy importante ya que count al estar envuelto en ref se ha convertido en un objeto con una propiedad llamada value.

También observamos que los métodos ahora son simples funciones.

Por último vemos que todo el código de nuestra aplicación está dentro de una función llamada setup() y esta devuelve todos los elementos que la vista va a usar, en este caso count, increment y decrement

Además existe una forma de ahorrarnos esto último para hacer más simple la declaración de funciones y variables, usando <script setup>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
  count.value++;
};
const decrement = () => {
  count.value--;
};
</script>

Fíjate que ahora ya no es necesario que encapsulemos todo dentro de setup, vue lo hará por nosotros.

Mientras que Option API sigue siendo una opción válida y fácil de usar para muchos casos de uso, Composition API, junto con <script setup>, representa la evolución de Vue.js hacia una forma más flexible, modular y eficiente de desarrollar aplicaciones.

La elección entre ambas depende en última instancia de las necesidades específicas del proyecto y de las preferencias del desarrollador, pero la tendencia hacia la adopción de la Composition API es innegable en la comunidad.