Εργαλεία Javascript σε δράση
Ανακαλύψτε μερικά εργαλεία ανάκτησης JavaScript για να βελτιώσετε το παιχνίδι προγραμματισμού σας. Μάθετε περισσότερα για το ESLint, το Prettier και το Husky!

Γιατί δεν πρέπει να χρησιμοποιείτε το API Options στο Due; Βρείτε απάντηση σε αυτό το ερώτημα στο ακόλουθο άρθρο και ανακαλύψτε τα οφέλη του Composition API.
Vue 3 εισήγαγε μια νέα προσέγγιση για τη δημιουργία συστατικών που ονομάζεται Σύνθεση API
. Είναι μια εναλλακτική λύση στο API επιλογών
. Το Composition API είναι πλήρως προαιρετικό και δεν χρειάζεται να το χρησιμοποιήσετε αν θέλετε να χρησιμοποιήσετε Vue 3. Ωστόσο, εισάγει ορισμένες σημαντικές βελτιώσεις που διευκολύνουν την εργασία σας και βελτιώνουν την αναγνωσιμότητα του κωδικός.
Το API σύνθεσης εισάγει μια νέα μέθοδο που ονομάζεται ρύθμιση
. Μέσα σε αυτό, μπορείτε να δημιουργήσετε όλα τα απαραίτητα στοιχεία του στοιχείου, όπως: δεδομένα
, μέθοδοι
, υπολογισμένες ιδιότητες
, παρατηρητές
. Χάρη σε αυτό, μπορείτε να διατηρήσετε τον κώδικα καθαρό, τοποθετώντας τη λογική που είναι υπεύθυνη για μια συγκεκριμένη λειτουργία σε ένα μέρος. Αντίθετα, το API Options επέβαλε τη διασπορά της λογικής σε όλο το αρχείο. Ως αποτέλεσμα, ο κώδικας δεν ήταν ευανάγνωστος και απαιτούσε κύλιση. Στο Composition API οι μέθοδοι, οι παρατηρητές κ.λπ. δεν χρειάζεται πλέον να ομαδοποιούνται ανά τύπο, μπορείτε να τις τοποθετήσετε όπως νομίζετε.
Το 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 ),
),
);
Στο API επιλογών, για να προσθέσετε π.χ. μια στατική λίστα στοιχείων που έχουν εισαχθεί από άλλο αρχείο, πρέπει να την προσθέσετε στην data() (πράγμα που έχει αρνητικό αντίκτυπο στην απόδοση) ή να την προσθέσετε στην αυτό το
στο created()
. Και οι δύο τρόποι δεν είναι πολύ κομψοί. Το API σύνθεσης και το νέο ρύθμιση
μέθοδο, από την οποία μπορείτε να εξάγετε όχι μόνο αντιδραστικά πράγματα αλλά και σταθερές και εξωτερικές εξαρτήσεις.
import list from "./list.json",
export default (
setup() (
return ( list ),
),
);
Χάρη στην επίσημη @vue/composition-api
plugin, μπορείτε να χρησιμοποιήσετε το Composition API στο Vue 2 επίσης.
<h3>Μέθοδος ρύθμισης</h3>
Η setup() είναι μια νέα μέθοδος που προστέθηκε στο Vue 3 όπου μπορείτε να τοποθετήσετε όλα τα απαραίτητα στοιχεία, όπως αντικείμενα δεδομένων, μεθόδους κ.λπ. Από εκεί μπορείτε να επιστρέψετε τα στοιχεία που θέλετε να συμπεριλάβετε στο πρότυπο.
<template>
<div>((( count ))</div>
</template>
import ( ref ) from "vue",
export default (
setup() (
const count = ref(10),
return ( count ),
),
);
Για να δημιουργήσετε ένα αντιδραστικό αντικείμενο ή πίνακα πρέπει να το δημιουργήσετε με την εντολή 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()
.
Σύνθεση 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 τεκμηρίωση.