¡Adiós Options API, Hola Script Setup! La no tan nueva forma de programar en Vue 3

script setup proporciona una forma más concisa de utilizar la Composition API en Single File Components (SFCs).

En su versión 3, Vue introdujo un nuevo sistema para organizar el código de los componentes llamado "Composition API". Esta API es una alternativa a la "Options API", que era el sistema original para organizar el código en Vue.

La diferencia fundamental entre estas dos APIs radica en cómo se organizan y se acceden a las distintas partes del componente Vue.

Options API

Cuando defines un componente utilizando la Options API, lo haces proporcionando un objeto con diferentes opciones predefinidas.

Estas opciones son (entre otras): data, methods, computed, watch, props, components, etc. Cada una de estas opciones sirve para un propósito específico y define una parte de la funcionalidad del componente. Hay muchas más opciones (mounted, created, beforeDestroyed etc), de ahí el nombre (Creo yo).

export default {
  data() {
    return {
      message: '¡Hola, Vue!'
    }
  },
  methods: {
    sayHello() {
      console.log(this.message);
    }
  }
}

Composition API

La Composition API es una nueva forma de definir y organizar componentes en Vue 3. En lugar de utilizar diferentes opciones para diferentes características, con la Composition API, defines tu componente utilizando una sola función: setup.

Dentro de la función setup, puedes definir todos los aspectos de tu componente: datos reactivos, funciones, observadores, etc. Esto te permite agrupar la lógica relacionada en lugar de dividirla por características.

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('¡Hola, Vue!');

    const sayHello = () => {
      console.log(message.value);
    }

    return {
      message,
      sayHello
    }
  }
}

Diferencias

Las principales diferencias entre estas dos APIs son:

1. Organización del código: Con la Options API, la lógica relacionada se divide entre diferentes opciones, mientras que con la Composition API, puedes agrupar la lógica relacionada juntos.

2. Reutilización de código: La Composition API facilita la reutilización de código y lógica entre componentes.

3. Tipo de datos: Con la Options API, se utiliza this para acceder a los datos reactivos, mientras que con la Composition API, se utilizan funciones como ref y reactive para crear y acceder a los datos reactivos.

Vue 3 todavía soporta completamente la Options API, por lo que puedes seguir usándola si prefieres.

Script Setup

es una nueva característica introducida en Vue 3.2 que proporciona una forma más concisa de utilizar la Composition API en Single File Components (SFCs).

En lugar de exportar un objeto de configuración del componente con una función setup, puedes escribir el código de tu componente directamente en el bloque . Cualquier variable o función que declares en se expondrá automáticamente en la plantilla de tu componente.

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

const message = ref('¡Hola, Vue!');

const sayHello = () => {
  console.log(message.value);
}
</script>

Este es el equivalente exacto al componente que definimos anteriormente con la función setup estándar, pero es más conciso.

Ventajas de Script Setup

1. Código más conciso y limpio: Puedes escribir tu código directamente en el bloque en lugar de tener que exportar una objeto

2. Mayor re utilización de la lógica: Puedes agrupar toda la lógica relacionada con una function en un mismo bloque

3. Mejor soporte de Typescript: Si estás utilizando Typescript, script setup y compositions API tienen mejor soporte que la options API

4. Control más granular sobre la reactividad: Puedes decidir exactamente qué datos deben ser reactivos y cómo deben reaccionar a los cambios

5. Organización del código: Puedes organizar el código por lógica de la funcionalidad, no por las opciones del componente.

Conclusión

La elección entre usar y la Composition API versus la Options API depende en gran medida de tu proyecto y de tus preferencias personales. No obstante es la nueva preferencia en proyectos Vue 3.