Vue 3 ha introducido la API de Composición como una forma alternativa y más flexible de manejar la lógica del componente, en comparación con la API de Opciones (Options API) que se usaba en las versiones anteriores. En este tutorial, exploraremos cuándo y cómo usar cada una junto con ejemplos sencillos.

API de Opciones (Options API)

La API de Opciones es el enfoque tradicional para escribir componentes en Vue. Organiza la lógica del componente dentro de diferentes secciones como data, methods, computed, etc. Aquí hay un ejemplo básico:

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: '¡Hola Vue!'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
});

app.mount('#app');

API de Composición (Composition API)

La API de Composición permite organizar y compartir mejor la lógica del componente a través de funciones reusables. Aquí hay un ejemplo básico usando Composition API:

import { createApp, ref } from 'vue';

const app = createApp({
  setup() {
    const message = ref('¡Hola Vue!');
    const greet = () => {
      alert(message.value);
    };
    return {
      message,
      greet
    };
  }
});

app.mount('#app');

¿Cuándo utilizar cada uno?

  • Usa Options API si vienes de versiones anteriores de Vue y tienes un proyecto pequeño o prefieres mantener las cosas simples y familiares.
  • Usa Composition API si estás trabajando en un proyecto grande y complejo donde la reutilización y organización de la lógica es crucial, o si deseas beneficiarte de las nuevas características que ofrece Vue 3.

Diferencias entre Options API y Composition API

  • Estructura: Options API organiza la lógica del componente en secciones específicas (data, methods, computed), mientras que Composition API permite agrupar la lógica de forma más flexible en funciones reusables.
  • Reusabilidad: Composition API facilita la creación de funciones reutilizables y módulos compartidos de lógica del componente, lo cual es ideal para aplicaciones grandes y complejas.
  • Legibilidad: Options API puede ser más legible y fácil de entender para desarrolladores que no están familiarizados con Vue 3, siendo más adecuado para proyectos más pequeños o cuando se trabaja en equipo con desarrolladores menos experimentados.

A continuación, te explico cómo funciona la nueva Composition API con un ejemplo básico:

import { ref, computed } from 'vue';

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

    function increment() {
      count.value++;
    }

    return {
      count,
      doubleCount,
      increment
    };
  }
};

En este ejemplo, utilizamos la función 'setup()' para definir nuestro estado reactivo, propiedades computadas y métodos:

  • 'ref()' se usa para crear una referencia reactiva que puede cambiar.
  • 'computed()' permite crear una propiedad computada que se actualiza automáticamente cuando su dependencia cambia.
  • Definimos una función 'increment()' para modificar el estado.

Finalmente, devolvemos el estado y los métodos que queremos exponer para que estén disponibles en la plantilla del componente.


Options API en Vue 3 ¿Obsoleto? 

En Vue 3, el método Options no desaparece y sigue siendo compatible. En la página oficial de Vue, se menciona que este método se seguirá manteniendo a lo largo del tiempo, por lo que puedes continuar utilizándolo en tus proyectos nuevos.

  • El método Options proporciona una manera estructurada y familiar de organizar la lógica de los componentes, especialmente para aquellos que vienen de Vue 2.
  • Mientras que la Composition API ofrece nuevas formas de reutilización de lógica y mejoras en la tipificación con TypeScript, el método Options sigue siendo válido y soportado.
  • Ambas APIs pueden coexistir en el mismo proyecto, lo que permite una transición gradual hacia la Composition API si así se desea.

Por lo tanto, no hay ninguna obligación de cambiar al nuevo método si prefieres seguir utilizando el método Options. Esto te brinda flexibilidad para elegir la mejor herramienta según tus necesidades y preferencias en cada proyecto.

Comparto una captura de la página oficial de vue junto con su link en donde explican el soporte de Options API en Vue 3

Options API Deprecated vue3

Recursos

Más información sobre options api en Vue 3, su soporte y mantenimiento en el futuro.

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org
Vue.js