Pārtrauciet izmantot opciju API Vue

Vue 3 ieviesta jauna pieeja komponentu izveidei, ko sauc par Sastāvs API. Tā ir alternatīva Iespēju API. Sastāva API nav obligāts, un jums tas nav jāizmanto, ja vēlaties izmantot. Vue 3. Tomēr tajā ir ieviesti daži svarīgi uzlabojumi, kas atvieglo darbu un uzlabo lasāmību. kods.

Sastāva API priekšrocības salīdzinājumā ar opciju API

1. Labāka koda organizācija un lasāmība.

Kompozīcijas API ievieš jaunu metodi ar nosaukumu iestatīšana. Tajā varat izveidot visus nepieciešamos komponenta elementus, piemēram,: dati, metodes, aprēķinātās īpašības, skatītāji. Pateicoties tam, varat saglabāt kodu tīru, ievietojot par konkrēto funkciju atbildīgo loģiku vienā vietā. Turpretī opciju API piespieda izkaisīt loģiku pa visu failu. Rezultātā kods nebija viegli lasāms un to vajadzēja ritināt. Composition API metodes, vērotāji u. c. vairs nav jāgrupē pēc tipa, tos var izvietot pēc saviem ieskatiem.

2. Loģikas izvilkšana un atkārtota izmantošana.

Kompozīcijas API ļauj rakstīt reaktīvo kodu jebkurā vietā. Jūs varat izvilkt daļu reaktīvās loģikas ārpus komponenta. Šāda veida kodu sauc par Kompozītmateriāli. Kompozītus var importēt daudzās sastāvdaļās, un tie ļauj iekapsulēt daļu loģikas un atklāt nepieciešamos reaktīvos elementus.

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

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

3. Viegli izmantot konstantes un ārējos resursus komponentē.

Opciju API, lai pievienotu, piemēram, no cita faila importētu statisku elementu sarakstu, tas ir jāpievieno funkcijai data() (kas negatīvi ietekmē veiktspēju) vai jāpievieno funkcijai šis vietnē izveidots(). Abi veidi nav ļoti eleganti. Sastāva API un jaunā iestatīšana metode, no kuras var eksportēt ne tikai reaktīvās lietas, bet arī konstantes un ārējās atkarības.

importēt sarakstu no "./list.json";
eksportēt noklusējuma (
  setup() (
    return ( list );
  ),
);

4. Varat pat izmantot Vue 2 komponēšanas API.

Pateicoties oficiālajam @vue/composition-api spraudnis, varat izmantot Sastāvs API Vue 2 arī.

Kā izmantot jauno kompozīciju API?

<h3>Iestatīšanas metode</h3>

setup() ir jauna metode, kas pievienota programmā Vue 3 kur var ievietot visus nepieciešamos elementus, piemēram, datu objektus, metodes utt. No turienes varat atgriezt elementus, kurus vēlaties iekļaut šablonā.

<template>
  <div>((( skaits ))</div>
</template>

importēt ( ref ) no "vue";
eksportēt noklusējuma (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

reactive()

Lai izveidotu reaktīvu objektu vai masīvu, tas ir jāveido, izmantojot reactive(noklusējuma vērtība) metode. Šī objekta sākotnējo vērtību var nodot kā metodes argumentu. Metode atgriež proxy šim objektam, tāpēc, veicot izmaiņas objektā, Vue zina par tiem un var pareizi atjaunināt skatu.

Sastāvs API

importēt ( reactive ) no "vue";
eksportēt noklusējuma (
  setup() (
    const user = reactive((
      name: "John",
      role: "ADMIN",
    ));
    return ( user );
  ),
);

Iespēju API

eksportēt noklusējuma iestatījumus (
  data() (
    return (
      user: (
        vārds: "John",
        loma: "ADMIN",
      ),
    );
  ),
);

Reactive tikai darbojas ar objektu tipiem (objektiem, masīviem un kolekciju tipiem, piemēram. Karte un Komplekts). Tajā nevar turēt primitīvus tipus, piemēram. virkne, numurs vai boolean. Tātad Vue ievieš arī ref().

ref()

Lai primitīvajiem elementiem pievienotu reaktivitāti, tie ir jāapvalda ar ref().

Sastāvs API

importēt ( ref ) no "vue";
eksportēt noklusējuma (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

Iespēju API

eksportēt noklusējuma iestatījumus (
  data() (
    return (
      count: 10,
    );
  ),
);

Reaktīvo objektu modificēšana

Vērtības objektos var mainīt tieši no reaktīvās metodes, bet, lai mainītu primitīvas vērtības, ir jāizmanto metode .value lauka.

importēt ( ref, reactive ) no "vue";
eksportēt noklusējuma (
  setup() (
    const user = reactive((
      name: "John",
    ));
    user.name = "John Doe"; // Vērtības maiņa

    const count = ref(10);
    count.value = 20; // Vērtības maiņa

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

Jūs ne nepieciešams izmantot .value īpašība veidnē.

<div>((( skaits ))</div>

Aprēķinātās īpašības

Izrēķinātās īpašības var viegli izveidot, kā parametru importētajai metodei aprēķināts() metode.

importēt ( reactive, computed ) no "vue";
eksportēt noklusējuma (
  setup() (
    const list = reactive([
      "Item 1",
      "Item 2",
    ]);

    // Aprēķināts
    const isEmpty = computed(() => list.length === 0);

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

Metodes

Varat arī ligzdot metodes iestatīšana metode.

Sastāvs API

importēt ( ref ) no "vue";
eksportēt noklusējuma (
  setup() (
    const count = ref(10);

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

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

Vērotāji

Novērotāji tiek izveidoti līdzīgi kā aprēķināts. Tomēr neaizmirstiet nodot proxy objekts, t. i. nosaukums, kā tas ir turpmāk minētajā piemērā, nevis name.value pati vērtība.

importēt ( watch, ref ) no "vue";
eksportēt noklusējuma (
  setup() (
    const name = ref("John");
        // Watcher
    watch(name, (currentValue, oldValue) => (
      console.log(`Vērtība mainīta no $(oldValue)uz $(currentValue)`);
    ));
    return ( name );
  ),
);

Kopsavilkums

Šajā rakstā esmu sniedzis tikai kompozīcijas API pamatus, lai jūs vispārīgi saprastu, ar ko tas atšķiras un kādas ir tā priekšrocības salīdzinājumā ar opciju API. Kompozīcijas API nodrošina arī alternatīvas pārējiem komponenta elementiem, piemēram. āķiun ievieš jaunas metodes, piemēram. watchEffect. Ir labi to izlasīt oficiālajā versijā. Vue 3 dokumentācija.