Διακοπή χρήσης του API επιλογών στο Vue

Vue 3 εισήγαγε μια νέα προσέγγιση για τη δημιουργία συστατικών που ονομάζεται Σύνθεση API. Είναι μια εναλλακτική λύση στο API επιλογών. Το Composition API είναι πλήρως προαιρετικό και δεν χρειάζεται να το χρησιμοποιήσετε αν θέλετε να χρησιμοποιήσετε Vue 3. Ωστόσο, εισάγει ορισμένες σημαντικές βελτιώσεις που διευκολύνουν την εργασία σας και βελτιώνουν την αναγνωσιμότητα του κωδικός.

Πλεονεκτήματα του Composition API έναντι του Options API

1. Καλύτερη οργάνωση και αναγνωσιμότητα του κώδικα.

Το API σύνθεσης εισάγει μια νέα μέθοδο που ονομάζεται ρύθμιση. Μέσα σε αυτό, μπορείτε να δημιουργήσετε όλα τα απαραίτητα στοιχεία του στοιχείου, όπως: δεδομένα, μέθοδοι, υπολογισμένες ιδιότητες, παρατηρητές. Χάρη σε αυτό, μπορείτε να διατηρήσετε τον κώδικα καθαρό, τοποθετώντας τη λογική που είναι υπεύθυνη για μια συγκεκριμένη λειτουργία σε ένα μέρος. Αντίθετα, το API Options επέβαλε τη διασπορά της λογικής σε όλο το αρχείο. Ως αποτέλεσμα, ο κώδικας δεν ήταν ευανάγνωστος και απαιτούσε κύλιση. Στο Composition API οι μέθοδοι, οι παρατηρητές κ.λπ. δεν χρειάζεται πλέον να ομαδοποιούνται ανά τύπο, μπορείτε να τις τοποθετήσετε όπως νομίζετε.

2. Εξαγωγή και επαναχρησιμοποίηση της λογικής.

Το API σύνθεσης σας επιτρέπει να γράφετε αντιδραστικό κώδικα οπουδήποτε. Μπορείτε να τραβήξετε κάποια αντιδραστική λογική έξω από το συστατικό. Αυτός ο τύπος κώδικα ονομάζεται Σύνθετα. Τα σύνθετα μπορούν να εισαχθούν σε πολλά στοιχεία και σας επιτρέπουν να ενθυλακώσετε κάποια λογική και να εκθέσετε τα απαραίτητα αντιδραστικά στοιχεία.

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

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

3. Εύκολη χρήση σταθερών και εξωτερικών πόρων στο συστατικό.

Στο API επιλογών, για να προσθέσετε π.χ. μια στατική λίστα στοιχείων που έχουν εισαχθεί από άλλο αρχείο, πρέπει να την προσθέσετε στην data() (πράγμα που έχει αρνητικό αντίκτυπο στην απόδοση) ή να την προσθέσετε στην αυτό το στο created(). Και οι δύο τρόποι δεν είναι πολύ κομψοί. Το API σύνθεσης και το νέο ρύθμιση μέθοδο, από την οποία μπορείτε να εξάγετε όχι μόνο αντιδραστικά πράγματα αλλά και σταθερές και εξωτερικές εξαρτήσεις.

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

4. Μπορείτε ακόμη και να χρησιμοποιήσετε το API σύνθεσης στο Vue 2.

Χάρη στην επίσημη @vue/composition-api plugin, μπορείτε να χρησιμοποιήσετε το Composition API στο Vue 2 επίσης.

Πώς να χρησιμοποιήσετε το νέο API σύνθεσης;

<h3>Μέθοδος ρύθμισης</h3>

Η setup() είναι μια νέα μέθοδος που προστέθηκε στο Vue 3 όπου μπορείτε να τοποθετήσετε όλα τα απαραίτητα στοιχεία, όπως αντικείμενα δεδομένων, μεθόδους κ.λπ. Από εκεί μπορείτε να επιστρέψετε τα στοιχεία που θέλετε να συμπεριλάβετε στο πρότυπο.

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

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

reactive()

Για να δημιουργήσετε ένα αντιδραστικό αντικείμενο ή πίνακα πρέπει να το δημιουργήσετε με την εντολή reactive(defaultValue) μέθοδος. Μπορείτε να περάσετε την αρχική τιμή αυτού του αντικειμένου μέσω ενός ορίσματος της μεθόδου. Η μέθοδος επιστρέφει ένα πληρεξούσιος για αυτό το αντικείμενο, έτσι ώστε όταν κάνετε αλλαγές σε αυτό, Vue γνωρίζει γι' αυτά και μπορεί να ανανεώσει σωστά την προβολή.

Σύνθεση API

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

API επιλογών

εξαγωγή προεπιλογής (
  data() (
    return (
      user: (
        name: "John",
        ρόλος: "ADMIN",
      ),
    );
  ),
);

Reactive μόνο λειτουργεί για τύπους αντικειμένων (αντικείμενα, πίνακες και τύποι συλλογών όπως οι Χάρτης και Ορίστε). Δεν μπορεί να κρατήσει πρωτόγονους τύπους όπως string, αριθμός ή boolean. Έτσι, το Vue εισάγει επίσης ref().

ref()

Για να προσθέσετε αντιδραστικότητα σε πρωτόγονα στοιχεία πρέπει να τα τυλίξετε με ref().

Σύνθεση API

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

API επιλογών

εξαγωγή προεπιλογής (
  data() (
    return (
      count: 10,
    );
  ),
);

Τροποποίηση αντιδραστικών αντικειμένων

Μπορείτε να αλλάξετε τιμές σε αντικείμενα απευθείας από τη μέθοδο reactive, αλλά για να αλλάξετε πρωτόγονες τιμές πρέπει να χρησιμοποιήσετε τη μέθοδο .value πεδίο.

import ( ref, reactive ) from "vue",
export default (
  setup() (
    const user = reactive((
      name: "John",
    ));
    user.name = "John Doe"; // Αλλαγή τιμής

    const count = ref(10),
    count.value = 20; // Αλλαγή τιμής

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

Εσείς δεν... πρέπει να χρησιμοποιήσετε το .value στο πρότυπο.

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

Υπολογισμένες ιδιότητες

Οι υπολογισμένες ιδιότητες μπορούν εύκολα να δημιουργηθούν περνώντας μια μέθοδο ως παράμετρο στην εισαγόμενη computed() μέθοδος.

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

    // Υπολογισμός
    const isEmpty = computed(() => list.length === 0),

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

Μέθοδοι

Μπορείτε επίσης να φωλιάσετε μεθόδους στην ρύθμιση μέθοδος.

Σύνθεση API

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

        // Μέθοδος
    const increment = () => (
      count.value++,
    );

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

Παρατηρητές

Οι παρατηρητές δημιουργούνται με παρόμοιο τρόπο με υπολογισμένο. Ωστόσο, θυμηθείτε να περάσετε το πληρεξούσιος αντικείμενο, δηλ. όνομα, όπως στο παρακάτω παράδειγμα, και όχι το name.value την ίδια την τιμή.

import ( watch, ref ) from "vue",
export default (
  setup() (
    const name = ref("John"),
        // Watcher
    watch(name, (currentValue, oldValue) => (
      console.log(`Η τιμή άλλαξε από $(oldValue)σε $(currentValue)`),
    ));
    return ( name ),
  ),
);

Περίληψη

Σε αυτό το άρθρο, σας έδωσα μόνο τα βασικά στοιχεία του API Σύνθεση, ώστε να έχετε μια γενική κατανόηση των διαφορών και των πλεονεκτημάτων που έχει σε σύγκριση με το API Επιλογές. Το Composition API παρέχει επίσης εναλλακτικές λύσεις για τα υπόλοιπα στοιχεία του στοιχείου, όπως άγκιστρα, και εισάγει νέες μεθόδους, όπως watchEffect. Είναι καλή ιδέα να το διαβάσετε στην επίσημη Vue 3 τεκμηρίωση.