Přestat používat rozhraní API Options v Vue

Vue 3 představil nový přístup k vytváření komponent nazvaný Složení API. Je to alternativa k Rozhraní API pro volby. Rozhraní Composition API je zcela volitelné a nemusíte ho používat, pokud chcete používat. Vue 3. Přináší však některá důležitá vylepšení, která usnadňují práci a zlepšují čitelnost. kód.

Výhody rozhraní Composition API oproti rozhraní Options API

1. Lepší organizace a čitelnost kódu.

Rozhraní API Composition zavádí novou metodu nazvanou nastavení. V něm můžete vytvořit všechny potřebné prvky komponenty, jako jsou: data, metody, vypočtené vlastnosti, watchers. Díky tomu můžete udržet kód čistý tím, že logiku odpovědnou za danou funkci umístíte na jedno místo. Naproti tomu rozhraní API Options si vynutilo rozptýlení logiky po celém souboru. Výsledkem bylo, že kód nebyl čitelný a vyžadoval rolování. V rozhraní Composition API již není nutné metody, watchery atd. seskupovat podle typu, můžete je umístit, jak uznáte za vhodné.

2. Vyjmutí a opětovné použití logiky.

Rozhraní API Composition umožňuje psát reaktivní kód kdekoli. Některou reaktivní logiku můžete vytáhnout mimo komponentu. Tento typ kódu se nazývá Kompozitní materiály. Komponenty lze importovat do mnoha komponent a umožňují zapouzdřit některé logické prvky a vystavit potřebné reaktivní prvky.

// shopping-list.js
import ( computed ) z "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,
  );
)

// Komponenta
import useSpoppingList z "@/composables/shopping-list.js";
exportovat výchozí (
  setup() (
    const ( products, productsCount, deleteProduct ) = useSpoppingList();
    return ( products, productsCount, deleteProduct );
  ),
);

3. Snadné používání konstant a externích zdrojů v komponentě.

Chcete-li v rozhraní API Options přidat např. statický seznam položek importovaných z jiného souboru, musíte jej přidat do funkce data() (což má negativní dopad na výkon) nebo jej přidat do funkce tento na adrese created(). Oba způsoby nejsou příliš elegantní. Rozhraní API Composition a nový nastavení přichází na pomoc metoda, ze které lze exportovat nejen reaktivní věci, ale také konstanty a externí závislosti.

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

4. V aplikaci Vue 2 můžete použít i rozhraní API Composition.

Díky oficiálnímu @vue/composition-api můžete použít rozhraní Composition API v Vue 2 také.

Jak používat nové rozhraní API Composition?

<h3>Způsob nastavení</h3>

setup() je nová metoda přidaná do funkce Vue 3 kam můžete umístit všechny potřebné položky, jako jsou datové objekty, metody atd. Odtud můžete vrátit prvky, které chcete do šablony zahrnout.

<template>
  <div>(( počet ))</div>
</template>

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

reaktivní()

Chcete-li vytvořit reaktivní objekt nebo pole, musíte jej vytvořit pomocí příkazu reactive(defaultValue) metoda. Počáteční hodnotu tohoto objektu můžete předat jako argument metody. Metoda vrací hodnotu proxy pro tento objekt, takže když v něm provedete změny, Vue o nich ví a může správně obnovit zobrazení.

Složení API

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

Rozhraní API pro volby

exportovat výchozí (
  data() (
    return (
      user: (
        name: "John",
        role: "ADMIN",
      ),
    );
  ),
);

Reactive pouze funguje pro typy objektů (objekty, pole a typy kolekcí, jako jsou např. Mapa a Sada). Nemůže obsahovat primitivní typy, jako např. řetězec, číslo nebo boolean. Takže Vue také zavádí ref().

ref()

Chcete-li primitivním prvkům přidat reaktivitu, musíte je obalit pomocí ref().

Složení API

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

Rozhraní API pro volby

exportovat výchozí (
  data() (
    return (
      count: 10,
    );
  ),
);

Úprava reaktivních objektů

Hodnoty v objektech můžete měnit přímo z reaktivní metody, ale pro změnu primitivních hodnot musíte použít metodu .value pole.

import ( ref, reactive ) z "vue";
exportovat výchozí (
  setup() (
    const user = reactive((
      name: "John",
    ));
    user.name = "John Doe"; // Změna hodnoty

    const count = ref(10);
    count.value = 20; // Změna hodnoty

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

Vy ne je třeba použít .value v šabloně.

<div>(( počet ))</div>

Vypočtené vlastnosti

Vypočtené vlastnosti lze snadno vytvořit předáním metody jako parametru importovanému příkazu vypočteno() metoda.

import ( reactive, computed ) z "vue";
exportovat výchozí (
  setup() (
    const list = reactive([
      "Item 1",
      "Item 2",
    ]);

    // Vypočítáno
    const isEmpty = computed(() => list.length === 0);

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

Metody

Metody můžete také vnořit do nastavení metoda.

Složení API

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

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

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

Watchers

Hlídači se vytvářejí podobně jako vypočtené. Nezapomeňte však předat proxy objekt, tj. název, jako v příkladu níže, nikoliv name.value hodnotu samotnou.

import ( watch, ref ) z "vue";
exportovat výchozí (
  setup() (
    const name = ref("John");
        // Watcher
    watch(name, (currentValue, oldValue) => (
      console.log(`Hodnota změněna z $(oldValue)na $(currentValue)`);
    ));
    return ( name );
  ),
);

Souhrn

V tomto článku jsem uvedl pouze základy rozhraní API Composition, abyste měli obecnou představu o tom, v čem se liší a jaké má výhody oproti rozhraní API Options. Rozhraní Composition API také poskytuje alternativy k ostatním prvkům komponenty, jako např. háčkya zavádí nové metody, jako např. watchEffect. Je dobré si ji přečíst v oficiální verzi. Vue 3 dokumentace.