Lõpeta Options API kasutamine Vue-s

Vue 3 võttis kasutusele uue lähenemisviisi komponentide loomiseks nimega Koostis API. See on alternatiiviks Valikute API. Composition API on täiesti vabatahtlik ja te ei pea seda kasutama, kui soovite kasutada Vue 3. See toob aga sisse mõned olulised parandused, mis lihtsustavad teie tööd ja parandavad loetavust. kood.

Koostamise API eelised võrreldes valikute APIga

1. Parem koodikorraldus ja loetavus.

Kompositsiooni API toob sisse uue meetodi nimega setup. Selle sees saab luua kõik komponendi vajalikud elemendid, näiteks: andmed, meetodid, arvutatud omadused, vaatajad. Tänu sellele saate hoida koodi puhtana, paigutades konkreetse funktsiooni eest vastutava loogika ühte kohta. Seevastu Options API sundis loogika hajutamist üle kogu faili. Selle tulemusena oli kood loetamatu ja nõudis kerimist. Composition APIs ei pea meetodid, vaatlejad jne enam tüübi järgi rühmitama, neid saab paigutada nii, nagu ise heaks arvate.

2. Loogika väljavõtmine ja taaskasutamine.

Koostamise API võimaldab teil kirjutada reaktiivset koodi kõikjal. Saate tõmmata osa reaktiivsest loogikast väljapoole komponenti. Seda tüüpi koodi nimetatakse Komposiitmaterjalid. Komposiitmooduleid saab importida paljudesse komponentidesse ja need võimaldavad kapseldada mõningaid loogikaid ja eksponeerida vajalikke reaktiivseid elemente.

// 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 from "@/composables/shopping-list.js";
export default (
  setup() (
    const ( products, productsCount, deleteProduct ) = useSpoppingList();
    return ( products, productsCount, deleteProduct );
  ),
);

3. Konstandide ja väliste ressursside lihtne kasutamine komponendis.

Valikute API-s tuleb näiteks teisest failist imporditud staatilise elemendiloendi lisamiseks lisada see data() (mis mõjutab negatiivselt jõudlust) või lisada see faili see aadressil created(). Mõlemad viisid ei ole väga elegantsed. Kompositsiooni API ja uus setup meetod tuleb appi, millest saab eksportida mitte ainult reaktiivseid asju, vaid ka konstante ja väliseid sõltuvusi.

import list from "./list.json";
eksportida vaikimisi (
  setup() (
    return ( list );
  ),
);

4. Saate isegi kasutada Vue 2 koostamise API-d.

Tänu ametlikule @vue/composition-api plugin, saate kasutada Composition API-d Vue 2 samuti.

Kuidas kasutada uut koostamise API-d?

<h3>Seadistamismeetod</h3>

setup() on uus meetod, mis on lisatud Vue 3 kuhu saab panna kõik vajalikud elemendid, nagu andmeobjektid, meetodid jne. Sealt saate tagastada elemendid, mida soovite malli lisada.

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

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

reaktiivne()

Reaktiivse objekti või massiivi loomiseks tuleb see luua käsuga reaktiivne(defaultValue) meetod. Selle objekti algväärtuse saab meetodi argumendina üle anda. Meetod tagastab proxy selle objekti jaoks, nii et kui te seda muudate, Vue teab neist ja saab vaateid korralikult värskendada.

Koostis API

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

Valikute API

eksportida vaikimisi (
  data() (
    return (
      user: (
        name: "John",
        roll: "ADMIN",
      ),
    );
  ),
);

Reactive ainult töötab objektitüüpide puhul (objektid, massiivid ja kollektsioonitüübid, näiteks Kaart ja Komplekt). See ei saa sisaldada selliseid primitiivseid tüüpe nagu string, number või boolean. Nii et Vue tutvustab ka ref().

ref()

Reaktiivsuse lisamiseks primitiivsetele elementidele tuleb need ümbritseda ref().

Koostis API

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

Valikute API

eksportida vaikimisi (
  data() (
    return (
      count: 10,
    );
  ),
);

Reaktiivsete objektide muutmine

Objektide väärtusi saab muuta otse reaktiivsest meetodist, kuid primitiivsete väärtuste muutmiseks tuleb kasutada meetodit .value valdkond.

import ( ref, reactive ) from "vue";
export default (
  setup() (
    const user = reactive((
      name: "John",
    ));
    user.name = "John Doe"; // Väärtuse muutmine

    const count = ref(10);
    count.value = 20; // Väärtuse muutus

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

Sa ei on vaja kasutada .value omadus mallil.

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

Arvutatud omadused

Arvutatud omadusi saab hõlpsasti luua, andes meetodi parameetrina üle imporditud computed() meetod.

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

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

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

Meetodid

Saate ka pesitseda meetodeid setup meetod.

Koostis API

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

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

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

Watchers

Vaatlejad luuakse sarnaselt arvutuslik. Kuid ärge unustage, et läbida proxy objekt, st. nimi, nagu alljärgnevas näites, mitte name.value väärtus ise.

import ( watch, ref ) from "vue";
export default (
  setup() (
    const name = ref("John");
        // Watcher
    watch(name, (currentValue, oldValue) => (
      console.log(`Väärtus muutus $(oldValue)-lt $(currentValue)`);
    ));
    return ( name );
  ),
);

Kokkuvõte

Selles artiklis olen tutvustanud teile ainult põhitõdesid Composition API kohta, et teil oleks üldine arusaam sellest, kuidas see erineb ja millised on selle eelised võrreldes Options APIga. Composition API pakub ka alternatiive ülejäänud komponendi elementidele, näiteks konksudja tutvustab uusi meetodeid, näiteks watchEffect. See on hea mõte lugeda seda ametlikus Vue 3 dokumentatsioon.