Nustoti naudoti Vue parinkčių API

Vue 3 pristatė naują komponentų kūrimo metodą, vadinamą Sudėtis API. Tai alternatyva Parinkčių API. Kompozicijos API yra visiškai neprivaloma ir jums nereikia jos naudoti, jei norite naudoti Vue 3. Tačiau joje įdiegta keletas svarbių patobulinimų, kurie palengvina jūsų darbą ir pagerina žurnalo skaitomumą. kodas.

Sudėties API privalumai, palyginti su parinkčių API

1. Geresnis kodo organizavimas ir skaitomumas.

Kompozicijos API įdiegtas naujas metodas, vadinamas sąranka. Jame galite sukurti visus būtinus komponento elementus, pvz: duomenys, metodai, apskaičiuotos savybės, stebėtojai. Dėl to galite išlaikyti švarų kodą, nes už tam tikrą funkciją atsakingą logiką galite patalpinti vienoje vietoje. Priešingai, parinkčių API privertė išsklaidyti logiką visame faile. Dėl to kodas buvo neįskaitomas ir jį reikėjo slinkti. Kompozicijos API metodų, stebėtojų ir kt. nebereikia grupuoti pagal tipą, juos galite išdėstyti taip, kaip jums atrodo tinkama.

2. Logikos išskyrimas ir pakartotinis naudojimas.

Kompozicijos API leidžia rašyti reaktyvųjį kodą bet kur. Galite ištraukti tam tikrą reaktyviąją logiką už komponento ribų. Tokio tipo kodas vadinamas Kompozicinės medžiagos. Kompozitinius elementus galima importuoti į daugelį komponentų, o tai suteikia galimybę įkapsuliuoti tam tikrą logiką ir atskleisti būtinus reaktyviuosius elementus.

// shopping-list.js
importas ( computed ) iš "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,
  );
)

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

3. Lengvai naudokite konstantas ir išorinius išteklius komponente.

Jei norite pridėti, pvz., statinį elementų sąrašą, importuotą iš kito failo, į parinkčių API turite jį pridėti prie funkcijos data() (tai turi neigiamą poveikį našumui) arba pridėti prie funkcijos šis svetainėje sukurta(). Abu būdai nėra labai elegantiški. Kompozicijos API ir naujoji sąranka metodą, iš kurio galima eksportuoti ne tik reaktyvius dalykus, bet ir konstantas bei išorines priklausomybes.

importuoti sąrašą iš "./list.json";
eksportas pagal nutylėjimą (
  setup() (
    return ( list );
  ),
);

4. Galite net naudoti Vue 2 kompozicijos API.

Dėkojame oficialiai @vue/composition-api įskiepį, galite naudoti kompozicijos API Vue 2 taip pat.

Kaip naudotis naująja kompozicijos API?

<h3>Sąrankos metodas</h3>

setup() - tai naujas metodas, pridėtas į Vue 3 į kurią galite įdėti visus reikiamus elementus, pavyzdžiui, duomenų objektus, metodus ir pan. Iš ten galite grąžinti elementus, kuriuos norite įtraukti į šabloną.

<template>
  <div>((( skaičiuoti ))</div>
</template>

importuoti ( ref ) iš "vue";
eksportas pagal nutylėjimą (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

reaktyvus()

Norėdami sukurti reaktyvųjį objektą arba masyvą, turite jį sukurti naudodami reaktyvus(defaultValue) metodas. Pradinę šio objekto vertę galite perduoti kaip metodo argumentą. Metodas grąžina proxy šiam objektui, todėl, kai jį pakeisite, Vue žino apie juos ir gali tinkamai atnaujinti rodinį.

Sudėtis API

importuoti ( reactive ) iš "vue";
eksportas pagal nutylėjimą (
  setup() (
    const user = reactive((
      name: "John",
      vaidmuo: "ADMIN",
    ));
    return ( user );
  ),
);

Parinkčių API

eksportas pagal numatytuosius nustatymus (
  data() (
    return (
      user: (
        vardas: "John",
        vaidmuo: "ADMIN",
      ),
    );
  ),
);

Reactive tik veikia objektų tipams (objektams, masyvams ir kolekcijų tipams, pvz. Žemėlapis ir Nustatyti). Jame negalima laikyti primityvių tipų, pvz. eilutė, numeris arba boolean. Taigi Vue taip pat pristato ref().

ref()

Norėdami pridėti reaktyvumo primityviems elementams, turite juos apgaubti ref().

Sudėtis API

importuoti ( ref ) iš "vue";
eksportas pagal nutylėjimą (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

Parinkčių API

eksportas pagal numatytuosius nustatymus (
  data() (
    return (
      count: 10,
    );
  ),
);

Reaktyvinių objektų keitimas

Objektų reikšmes galite keisti tiesiogiai naudodami reaktyvųjį metodą, tačiau norėdami keisti primityviąsias reikšmes turite naudoti .value srityje.

importuoti ( ref, reactive ) iš "vue";
eksportas pagal nutylėjimą (
  setup() (
    const user = reactive((
      name: "John",
    ));
    user.name = "John Doe"; // Vertės pakeitimas

    const count = ref(10);
    count.value = 20; // Vertės pokytis

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

Jūs ne reikia naudoti .value šablono savybė.

<div>((( skaičiuoti ))</div>

Apskaičiuotos savybės

Apskaičiuotas savybes galima lengvai sukurti perduodant metodą kaip parametrą importuotam apskaičiuota() metodas.

importuoti ( reactive, computed ) iš "vue";
eksportas pagal nutylėjimą (
  setup() (
    const list = reactive([
      "Item 1",
      "Item 2",
    ]);

    // Apskaičiuota
    const isEmpty = computed(() => list.length === 0);

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

Metodai

Taip pat galite įterpti metodus į sąranka metodas.

Sudėtis API

importuoti ( ref ) iš "vue";
eksportas pagal nutylėjimą (
  setup() (
    const count = ref(10);

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

    return (
      count,
      inkrementas,
    );
  ),
);

Stebėtojai

Stebėtojai kuriami panašiai kaip apskaičiuota. Tačiau nepamirškite perduoti proxy objektas, t. y. pavadinimaskaip toliau pateiktame pavyzdyje, o ne name.value pati vertė.

importuoti ( watch, ref ) iš "vue";
eksportas pagal nutylėjimą (
  setup() (
    const name = ref("John");
        // Watcher
    watch(name, (currentValue, oldValue) => (
      console.log(`Vertė pakeista iš $(oldValue)į $(currentValue)`);
    ));
    return ( pavadinimas );
  ),
);

Santrauka

Šiame straipsnyje pateikiau tik kompozicijos API pagrindus, kad turėtumėte bendrą supratimą, kuo ji skiriasi ir kokių privalumų turi, palyginti su parinkčių API. Kompozicijos API taip pat suteikia alternatyvų kitiems komponento elementams, pvz. kabliukaiir pristato naujus metodus, pvz. watchEffect. Verta jį perskaityti oficialioje Vue 3 dokumentai.