Options API y Composition API en Vue.js

En Vue.js, existen dos sintaxis diferentes para crear componentes: la Options API y la Composition API.

Ambas sintaxis pueden convivir en el mismo proyecto. Son totalmente compatibles. Aunque, lo general, es que optemos por una o por otra (por no liar).

En este curso nos centraremos principalmente en la Composition API porque es la forma moderna y recomendada (y además, es la que me gusta a mi).

Pero tenéis que conocer la existencia de ambas, sobre todo porque aún os la vaís a encontrar en muchos tutoriales y librerías.

Así que vamos a ello 👇.

Comparación Options API vs Composition API

Vamos a empezar viendo las ventajas y desventajas de cada una de las sintaxis. En resumen.

En general, la lógica y organización de la nueva Composition API es mejor. Pero, la sintaxis tradicional de Optional API puede ser más intuitivo para desarrolladores nuevos en Vue.js.

¿Qué es la Composition API?

La Composition API es la nueva sintaxis introducida en Vue.js 3, que es más moderna y más flexible (introducida para abordar limitaciones de Options Api)

En este enfoque, la lógica se organiza en funciones reutilizables, lo que permite una mejor organización del código y una mayor reutilización de la lógica.

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

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

const count = ref(0);

function increment() {
  count.value++;
}
</script>

¿Qué es la Options API?

La Options API es la sintaxis clásica de Vue.js para crear componentes en Vue.js, que puede ser más intuitiva para gente que empieza.

En este enfoque, la lógica se organiza en opciones claramente definidas y separadas, como data, methods, computed, watch, y props, etc…

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

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

Migrar de Options API a Composition API

Si en alguno momento te toca migrar un componente de Vue de Options API a Composition API, aquí tienes unas pautas de como hacearlo (y con paciencia).

Primero, importa las funciones que necesites de vue, como ref, reactive, computed, y watch:

import { ref, reactive, computed, watch } from 'vue'

Ahora tendrás que sustituir las opciones por como data, methods, computed y watch por sus equivalentes,

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

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

const count = ref(0)

const doubleCount = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>