Dejar de utilizar la API de opciones en Vue

Vue 3 introdujo un nuevo enfoque para la creación de componentes denominado Composición API. Es una alternativa al API de opciones. La API de composición es totalmente opcional y no es necesario utilizarla si desea utilizar Vue 3. Sin embargo, introduce algunas mejoras importantes que facilitan su trabajo y mejoran la legibilidad del código.

Ventajas de la API de composición sobre la API de opciones

1. Mejor organización y legibilidad del código.

La API de composición introduce un nuevo método denominado configuración. Dentro de ella, puede crear todos los elementos necesarios del componente, tales como: datos, métodos, propiedades calculadas, observadores. Gracias a esto, puede mantener el código limpio colocando la lógica responsable de una función determinada en un solo lugar. En cambio, la API de opciones obligaba a dispersar la lógica por todo el archivo. Como resultado, el código no era legible y era necesario desplazarse por él. En la API de composición, los métodos, observadores, etc. ya no tienen que agruparse por tipo, puedes colocarlos como mejor te parezca.

2. Extracción y reutilización de la lógica.

La API de composición le permite escribir código reactivo en cualquier lugar. Puede extraer cierta lógica reactiva fuera del componente. Este tipo de código se denomina Composables. Los Composables se pueden importar en muchos componentes y permiten encapsular parte de la lógica y exponer los elementos reactivos necesarios.

// shopping-list.js
import ( computed ) from "vue";

export function useShoppingList(listId) (
  const productos = shoppingList.getAllProducts(listId);
  const productsCount = computed(() => products.value.length);
  const deleteProduct = (productId) => shoppingList.deleteProduct(productId);

  devolver (
    productos,
    productosCount,
    eliminarProducto,
  );
)

// Componente
import useSpoppingList from "@/composables/shopping-list.js";
exportar por defecto (
  setup() (
    const ( productos, productosCuento, borrarProducto ) = useSpoppingList();
    return ( productos, productosCuento, borrarProducto );
  ),
);

3. Utilizar fácilmente constantes y recursos externos en el componente.

En la API de opciones, para añadir, por ejemplo, una lista estática de elementos importados de otro archivo, es necesario añadirla a data() (lo que repercute negativamente en el rendimiento) o añadirla a este en creado(). Ambas formas no son muy elegantes. La API de composición y la nueva configuración desde el que puedes exportar no sólo cosas reactivas, sino también constantes y dependencias externas.

import list de "./list.json";
export default (
  setup() (
    return ( lista );
  ),
);

4. Incluso puedes utilizar la API de composición en Vue 2.

Gracias a la @vue/composition-api puede utilizar la API de composición en Vue 2 también.

¿Cómo utilizar la nueva API de composición?

<h3>Método de configuración</h3>

setup() es un nuevo método añadido en Vue 3 donde puedes poner todos los elementos necesarios como objetos de datos, métodos, etc. A partir de ahí puede devolver los elementos que desea incluir en la plantilla.

<template>
  <div>(( cuenta ))</div>
</template>

import ( ref ) from "vue";
export default (
  configuración() (
    const count = ref(10);
    return ( count );
  ),
);

reactivo()

Para crear un objeto o array reactivo hay que crearlo con el método reactive(defaultValue) método. Puede pasar el valor inicial de este objeto mediante un argumento del método. El método devuelve un proxy para este objeto, así que cuando hagas cambios en él, Vue los conoce y puede actualizar la vista correctamente.

Composición API

import ( reactive ) from "vue";
export default (
  configuración() (
    const usuario = reactive((
      nombre: "Juan",
      rol: "ADMIN",
    ));
    return ( usuario );
  ),
);

API de opciones

exportar por defecto (
  data() (
    devolver (
      usuario: (
        nombre: "Juan",
        rol: "ADMIN",
      ),
    );
  ),
);

Reactive sólo funciona para tipos de objeto (objetos, matrices y tipos de colección como Mapa y Establecer). No puede contener tipos primitivos como cadena, número o booleano. Así que Vue también introduce ref().

ref()

Para añadir reactividad a los elementos primitivos hay que envolverlos con ref().

Composición API

import ( ref ) from "vue";
export default (
  configuración() (
    const count = ref(10);
    return ( count );
  ),
);

API de opciones

export default (
  data() (
    devolver (
      cuenta 10,
    );
  ),
);

Modificación de objetos reactivos

Puedes cambiar valores en objetos desde el método reactivo directamente, pero para cambiar valores primitivos debes usar el método .valor campo.

import ( ref, reactive ) from "vue";
export default (
  configuración() (
    const usuario = reactive((
      nombre: "Juan",
    ));
    user.name = "John Doe"; // Cambio de valor

    const count = ref(10);
    count.value = 20; // Cambio de valor

    devolver (
      usuario,
      conteo,
    );
  ),
);

Usted no necesita utilizar el .valor de la plantilla.

<div>(( cuenta ))</div>

Propiedades calculadas

Las propiedades calculadas pueden crearse fácilmente pasando un método como parámetro al método importado computado() método.

import ( reactive, computed ) from "vue";
export default (
  configuración() (
    const list = reactive([
      "Elemento 1",
      "Item 2",
    ]);

    // Calculado
    const isEmpty = calculado(() => lista.longitud === 0);

    return (
      lista,
      isEmpty,
    );
  ),
);

Métodos

También puede anidar métodos en el directorio configuración método.

Composición API

import ( ref ) from "vue";
export default (
  configuración() (
    const count = ref(10);

        // Método
    const incremento = () => (
      count.value++;
    );

    devolver (
      recuento,
      incremento,
    );
  ),
);

Observadores

Los observadores se crean de forma similar a calculado. Sin embargo, recuerde pasar el proxy objetoes decir nombrecomo en el ejemplo siguiente, no el nombre.valor propio valor.

import ( watch, ref ) from "vue";
export default (
  configuración() (
    const nombre = ref("Juan");
        // Observador
    watch(nombre, (valoractual, valorantiguo) => (
      console.log(`Valor cambiado de $(valorantiguo)a $(valoractual)`);
    ));
    return ( nombre)
  ),
);

Resumen

En este artículo, sólo te he dado los conceptos básicos de la API de composición para que tengas una comprensión general de en qué se diferencia y qué ventajas tiene en comparación con la API de opciones. La API de composición también proporciona alternativas al resto de los elementos del componente, tales como ganchose introduce nuevos métodos, como watchEffect. Conviene leerlo en la versión oficial Vue 3 documentación.