Lopeta Options API:n käyttö Vue:ssä

Vue 3 esitteli uuden lähestymistavan komponenttien luomiseen nimeltä Koostumus API. Se on vaihtoehto Vaihtoehtojen API. Composition API on täysin valinnainen, eikä sinun tarvitse käyttää sitä, jos haluat käyttää Vue 3. Se sisältää kuitenkin joitakin tärkeitä parannuksia, jotka helpottavat työtäsi ja parantavat luettavuutta. koodi.

Koostumus-API:n edut vaihtoehtoihin verrattuna

1. Parempi koodin organisointi ja luettavuus.

Composition API esittelee uuden metodin nimeltä setup. Sen sisällä voit luoda kaikki komponentin tarvittavat elementit, kuten: tiedot, menetelmät, laskennalliset ominaisuudet, tarkkailijat. Tämän ansiosta voit pitää koodin siistinä sijoittamalla tietystä ominaisuudesta vastaavan logiikan yhteen paikkaan. Sitä vastoin Options API pakotti logiikan hajauttamaan sen eri puolille tiedostoa. Tämän seurauksena koodi ei ollut luettavaa ja vaati vierittämistä. Composition API:ssa metodeja, tarkkailijoita jne. ei enää tarvitse ryhmitellä tyypin mukaan, vaan voit sijoittaa ne haluamallasi tavalla.

2. Logiikan poistaminen ja uudelleenkäyttö.

Composition API:n avulla voit kirjoittaa reaktiivista koodia missä tahansa. Voit vetää osan reaktiivisesta logiikasta komponentin ulkopuolelle. Tällaista koodia kutsutaan Yhdistelmät. Komposiitit voidaan tuoda moniin komponentteihin, ja niiden avulla voit kapseloida osan logiikasta ja paljastaa tarvittavat reaktiiviset elementit.

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

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

3. Käytä helposti vakioita ja ulkoisia resursseja komponentissa.

Jos haluat lisätä Options API:ssa esimerkiksi staattisen luettelon toisesta tiedostosta tuoduista kohteista, sinun on lisättävä se data()-funktioon (millä on kielteinen vaikutus suorituskykyyn) tai lisättävä se kohtaan tämä osoitteessa created(). Molemmat tavat eivät ole kovin tyylikkäitä. Composition API ja uusi setup metodi, josta voit viedä reaktiivisten asioiden lisäksi myös vakioita ja ulkoisia riippuvuuksia.

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

4. Voit jopa käyttää Vue 2:n Composition API:ta.

Kiitos virallisen @vue/composition-api laajennuksen avulla voit käyttää Composition API:ta Vue 2 myös.

Miten uutta Composition APIa käytetään?

<h3>Asetusmenetelmä</h3>

setup() on uusi menetelmä, joka on lisätty Vue 3 johon voit laittaa kaikki tarvittavat elementit, kuten dataobjektit, metodit jne. Sieltä voit palauttaa elementit, jotka haluat sisällyttää malliin.

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

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

reaktiivinen()

Luodaksesi reaktiivisen objektin tai joukon sinun täytyy luoda se komennolla reactive(defaultValue) menetelmä. Voit antaa tämän objektin alkuarvon menetelmän argumentin kautta. Metodi palauttaa proxy tälle objektille, joten kun teet siihen muutoksia, Vue tietää niistä ja voi päivittää näkymän asianmukaisesti.

Koostumus API

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

Vaihtoehtojen API

viedä oletusarvoisesti (
  data() (
    return (
      user: (
        name: "John",
        rooli: "ADMIN",
      ),
    );
  ),
);

Reactive vain toimii objektityypeille (objektit, matriisit ja kokoelmatyypit, kuten esim. Kartta ja Aseta). Se ei voi pitää sisällään primitiivisiä tyyppejä, kuten merkkijono, numero tai boolean. Joten Vue tuo myös ref().

ref()

Lisätäksesi reaktiivisuutta primitiivisiin elementteihin sinun täytyy kietoa ne kanssa ref().

Koostumus API

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

Vaihtoehtojen API

viedä oletusarvoisesti (
  data() (
    return (
      count: 10,
    );
  ),
);

Reaktiivisten objektien muokkaaminen

Voit muuttaa objektien arvoja suoraan reaktiivisesta metodista, mutta primitiivisten arvojen muuttamiseksi sinun on käytettävä komentoa .value kenttä.

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

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

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

Sinä Älä... täytyy käyttää .value ominaisuus mallissa.

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

Lasketut ominaisuudet

Laskennalliset ominaisuudet voidaan luoda helposti välittämällä metodi parametrina tuodulle metodille nimeltä computed() menetelmä.

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

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

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

Menetelmät

Voit myös sijoittaa metodeja setup menetelmä.

Koostumus API

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

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

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

Watchers

Tarkkailijat luodaan samalla tavalla kuin laskettu. Muista kuitenkin siirtää proxy kohde, ts. nimi, kuten alla olevassa esimerkissä, ei name.value arvo itse.

import ( watch, ref ) from "vue";
export default (
  setup() (
    const name = ref("John");
        // Watcher
    watch(name, (currentValue, oldValue) => ( (
      console.log(`Arvo muuttui $(oldValue)sta $(currentValue)`);
    ));
    return ( nimi );
  ),
);

Yhteenveto

Tässä artikkelissa olen esitellyt vain Composition API:n perusteet, jotta sinulla olisi yleiskäsitys siitä, miten se eroaa ja mitä etuja sillä on Options API:han verrattuna. Composition API tarjoaa myös vaihtoehtoja muille komponentin elementeille, kuten esim. koukutja esittelee uusia menetelmiä, kuten watchEffect. Se on hyvä lukea virallisesta versiosta. Vue 3 dokumentaatio.