Hættu að nota Options API í Vue

Vue 3 kynnti nýja nálgun til að búa til íhluti sem kallast Samansettur forritaskil. Það er valkostur við Valkostir-API. Composition API-ið er algjörlega valkvætt og þú þarft ekki að nota það ef þú vilt nota Vue 3. Hins vegar kynnir það nokkrar mikilvægar umbætur sem gera vinnu þína auðveldari og bæta læsileika kóði.

Kostir samsetningar-API fram yfir valkosta-API

1. Betri skipulag kóða og læsileiki.

Composition API-ið kynnir nýja aðferð sem kallast uppsetning. Inni í því geturðu búið til alla nauðsynlega þætti íhlutarins, svo sem: gögn, aðferðir, útreiknuð eiginleikar, vaktarmenn. Þökk sé þessu geturðu haldið kóðanum hreinum með því að setja lógík sem sér um ákveðna eiginleika á einn stað. Í mótsögn við þetta neyddi Options API til að dreifa lógíkinni um alla skrána. Afleiðingin var sú að kóðinn var ólesanlegur og krafðist flettingar. Í aðferðum Composition API þarf ekki lengur að flokka watchers o.s.frv. eftir tegund; þú getur sett þau hvar sem þér hentar.

2. Útdráttur og endurnotkun rökfræði.

Composition API gerir þér kleift að skrifa reactive-kóða hvar sem er. Þú getur fært hluta af reactive-rökfræði utan þáttsins. Þessi tegund kóða kallast Samsettanleikar. Composables má flytja inn í marga þætti og leyfa þér að fela ákveðna rökfræði og birta nauðsynlega reactive þætti.

// 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,
  );
)

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

3. Notið auðveldlega fastastærðir og ytri auðlindir í íhlut.

Í Options API, til að bæta við t.d. kyrrstæðum lista yfir atriði flutt inn úr annarri skrá, þarftu að bæta honum við data() (sem hefur neikvæð áhrif á frammistöðu) eða bæta honum við þetta í búa til(). Báðar leiðirnar eru ekki mjög glæsilegar. Composition API-ið og nýja uppsetning aðferð sem bjargar, úr henni geturðu flutt út ekki aðeins reactífa hluti heldur einnig fastastærðir og ytri háðleika.

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

4. Þú getur jafnvel notað Composition API í Vue 2.

Þökk sé hinum opinbera @vue/samsetninga-api Í viðbótinni geturðu notað Composition API í Vue 2 einnig.

Hvernig á að nota nýja Composition API?

<h3>Uppsetningarferli</h3>

setup() er ný aðferð sem bætt var við í Vue 3 Þar sem þú getur sett allar nauðsynlegar einingar, svo sem gagnahluti, aðferðir o.s.frv. Þaðan geturðu skilað þeim þáttum sem þú vilt innifela í sniðmátinu.

<template>
  <div>((telja))</div>
</template>

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

reactive()

Til að búa til reactive-hlut eða -rað þarftu að búa það til með the reactive(gagnstillingargildi) aðferð. Þú getur sent upphafsgildi þessa hlutar sem rök aðferðar. Aðferðin skilar a umboðsmaður fyrir þennan hlut, svo þegar þú gerir breytingar á honum, Vue Þekkir þau og getur endurnýjað útsýnið rétt.

Samsetningareininga-API

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

Valkostir-API

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

Eitt Tíu Pósið Sjö Tíu Tíve aðeins virkar fyrir hlutategundir (hluti, fylki og safnategundir eins og Kort og Settu). Það getur ekki geymt frumgerðir eins og keðja, tala eða Búllógísill. Svo kynnir Vue einnig endurspegla().

endurspegla()

Til að bæta reactivity við frumþætti þarftu að vefja þá með endurspegla().

Samsetningareininga-API

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

Valkostir-API

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

Að breyta reactive hlutum

Þú getur breytt gildum í hlutum beint með reactive-aðferðinni, en til að breyta frumstæðum gildum verður þú að nota .gildi svið.

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

 const count = ref(10);
    count.value = 20;  // Gildisbreyting

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

Þú ekki þarf að nota .gildi Eign í sniðmátinu.

<div>((telja))</div>

Útreiknuð eiginleikar

Reiknuð eiginleikar geta auðveldlega verið búnar til með því að senda aðferð sem breytu til innfluttra reiknað() aðferð.

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

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

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

Aðferðir

Þú getur einnig hreiðrað aðferðir í uppsetning aðferð.

Samsetningareininga-API

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

 // Aðferð
    const increment = () => (
 count.value++;
    );

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

Vaktarar

Vaktarar eru búnir til á svipaðan hátt og reiknað. Hins vegar, mundu að skila umboðsmaður hlutur, þ.e. nafn, eins og í dæminu hér að neðan, ekki nafn.gildi gildið sjálft.

import ( watch, ref ) from "vue";
export default (
  setup() (
    const name = ref("John");
 // Fylgdarmaður
    watch(name, (currentValue, oldValue) => (
 console.log(`Gildi breyttist úr $(oldValue) í $(currentValue)`);
    ));
    return ( name );
  ),
);

Yfirlit

Í þessari grein hef ég aðeins gefið þér grunnatriði Composition API svo þú hafir almenna skilning á því hvernig það er frábrugðið Options API og hvaða kosti það hefur. Composition API býður einnig upp á valkosti fyrir restina af þáttum komponentsins, svo sem krókar, og kynnir nýjar aðferðir, svo sem áhrif áhorfs. Það er góð hugmynd að lesa það í opinberu Vue 3 skjalagerð.