Zaprzestanie korzystania z Options API w Vue

Vue 3 wprowadziła nowe podejście do tworzenia komponentów o nazwie Skład API. Jest to alternatywa dla Options API. Interfejs API kompozycji jest w pełni opcjonalny i nie trzeba z niego korzystać, jeśli chce się używać Vue 3. Wprowadza jednak kilka ważnych ulepszeń, które ułatwiają pracę i poprawiają czytelność aplikacji. kod.

Przewaga interfejsu API kompozycji nad interfejsem API opcji

1. Lepsza organizacja i czytelność kodu.

Interfejs API kompozycji wprowadza nową metodę o nazwie konfiguracja. Wewnątrz niego można utworzyć wszystkie niezbędne elementy komponentu, takie jak: dane, metody, obliczone właściwości, obserwatorzy. Dzięki temu można utrzymać kod w czystości, umieszczając logikę odpowiedzialną za daną funkcję w jednym miejscu. Z kolei Options API wymuszało rozrzucenie logiki po całym pliku. W efekcie kod był nieczytelny i wymagał przewijania. W Composition API metody, obserwatorzy itp. nie muszą być już grupowane według typu, można je umieszczać wedle uznania.

2. Wyodrębnianie i ponowne wykorzystywanie logiki.

API Composition umożliwia pisanie kodu reaktywnego w dowolnym miejscu. Można wyciągnąć logikę reaktywną poza komponent. Ten rodzaj kodu nazywany jest Composables. Komponenty Composables mogą być importowane do wielu komponentów i pozwalają na hermetyzację pewnej logiki i wyeksponowanie niezbędnych elementów reaktywnych.

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

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

  return (
    products,
    productsCount,
    deleteProduct,
  );
)

// Komponent
import useSpoppingList z "@/composables/shopping-list.js";
export default (
  setup() (
    const ( products, productsCount, deleteProduct ) = useSpoppingList();
    return ( products, productsCount, deleteProduct );
  ),
);

3. Łatwe korzystanie ze stałych i zasobów zewnętrznych w komponencie.

W Options API, aby dodać np. statyczną listę elementów zaimportowanych z innego pliku, należy dodać ją do data() (co ma negatywny wpływ na wydajność) lub dodać ją do to w created(). Oba sposoby nie są zbyt eleganckie. Interfejs API kompozycji i nowy interfejs konfiguracja z pomocą przychodzi metoda, z której można eksportować nie tylko rzeczy reaktywne, ale także stałe i zewnętrzne zależności.

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

4. Możesz nawet użyć Composition API w Vue 2.

Dzięki oficjalnemu @vue/composition-api można użyć interfejsu API kompozycji w Vue 2 również.

Jak korzystać z nowego API kompozycji?

<h3>Metoda konfiguracji</h3>

setup() jest nową metodą dodaną w Vue 3 gdzie można umieścić wszystkie niezbędne elementy, takie jak obiekty danych, metody itp. Stamtąd możesz zwrócić elementy, które chcesz uwzględnić w szablonie.

<template>
  <div>(( count ))</div>
</template>

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

reactive()

Aby utworzyć reaktywny obiekt lub tablicę, należy utworzyć go za pomocą funkcji reactive(defaultValue) method. Wartość początkową tego obiektu można przekazać za pomocą argumentu metody. Metoda zwraca wartość pełnomocnik dla tego obiektu, więc po wprowadzeniu w nim zmian, Vue wie o nich i może prawidłowo odświeżyć widok.

Skład API

import ( reactive ) from "vue";
export default (
  setup() (
    const user = reactive((
      name: "John",
      rola: "ADMIN",
    ));
    return ( user;)
  ),
);

Options API

export default (
  data() (
    return (
      user: (
        name: "John",
        role: "ADMIN",
      ),
    );
  ),
);

Reactive tylko działa dla typów obiektów (obiektów, tablic i typów kolekcji, takich jak Mapa i Zestaw). Nie może przechowywać prymitywnych typów, takich jak ciąg, liczba lub logiczna. Tak więc Vue wprowadza również ref().

ref()

Aby dodać reaktywność do elementów prymitywnych, należy owinąć je folią ref().

Skład API

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

Options API

export default (
  data() (
    return (
      count: 10,
    );
  ),
);

Modyfikowanie obiektów reaktywnych

Wartości w obiektach można zmieniać bezpośrednio z poziomu metody reaktywnej, ale aby zmienić wartości prymitywne, należy użyć metody .value pole.

import ( ref, reactive ) from "vue";
export default (
  setup() (
    const user = reactive((
      name: "John",
    ));
    user.name = "John Doe"; // Zmiana wartości

    const count = ref(10);
    count.value = 20; // Zmiana wartości

    return (
      user,
      count,
    );
  ),
);

Ty nie trzeba użyć .value w szablonie.

<div>(( count ))</div>

Obliczone właściwości

Obliczone właściwości można łatwo utworzyć, przekazując metodę jako parametr do zaimportowanej właściwości computed() metoda.

import ( reactive, computed ) from "vue";
export default (
  setup() (
    const list = reactive([
      "Pozycja 1",
      "Pozycja 2",
    ]);

    // Obliczone
    const isEmpty = computed(() => list.length == 0);

    return (
      list,
      isEmpty,
    );
  ),
);

Metody

Można również zagnieżdżać metody w konfiguracja metoda.

Skład API

import ( ref ) from "vue";
export default (
  setup() (
    const count = ref(10);

        // Metoda
    const increment = () => (
      count.value++;
    );

    return (
      count,
      increment,
    );
  ),
);

Obserwatorzy

Obserwatorzy są tworzeni w podobny sposób jak obliczony. Należy jednak pamiętać, aby przekazać pełnomocnik obiekt, tj. nazwajak w poniższym przykładzie, a nie name.value sama wartość.

import ( watch, ref ) from "vue";
export default (
  setup() (
    const name = ref("John");
        // Watcher
    watch(name, (currentValue, oldValue) => (
      console.log(`Wartość zmieniona z $(oldValue)na $(currentValue)`);
    ));
    return ( name;)
  ),
);

Podsumowanie

W tym artykule przedstawiłem tylko podstawy Composition API, abyś miał ogólne pojęcie o tym, czym się różni i jakie ma zalety w porównaniu z Options API. Composition API zapewnia również alternatywy dla pozostałych elementów komponentu, takich jak hakii wprowadza nowe metody, takie jak watchEffect. Dobrym pomysłem jest przeczytanie go w oficjalnej wersji Vue 3 dokumentacja.