Μάθετε για το Vue.js Watchers για να βελτιώσετε την ανάπτυξη της εφαρμογής Ιστού σας

Βασικά Takeaways

• Τα πλαίσια JavaScript όπως το Vue προσφέρουν λειτουργίες όπως αρχιτεκτονική στοιχείων, διαχείριση κατάστασης και δρομολόγηση για την απλοποίηση της ανάπτυξης εφαρμογών ιστού.
• Οι παρατηρητές Vue είναι λειτουργίες που παρακολουθούν τις αλλαγές στις αντιδραστικές ιδιότητες και σας επιτρέπουν να αντιδράτε σε συμβάντα και τροποποιήσεις δεδομένων.
• Συγκρίνοντας τους παρατηρητές με υπολογισμένες ιδιότητες, οι υπολογισμένες ιδιότητες είναι πιο συνοπτικές και πιο ευανάγνωστες, με αποτέλεσμα καλύτερη απόδοση και εντοπισμό σφαλμάτων.

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

Το Vue, ένα από αυτά τα πλαίσια, προσφέρει πολλές δυνατότητες για την επιτάχυνση της ανάπτυξης. Η λειτουργία ρολογιού σάς επιτρέπει να παρακολουθείτε τις τιμές των μεταβλητών και των παραστάσεων κατά την εκτέλεση του προγράμματος.

Τι είναι οι Watchers στο Vue;

Οι παρατηρητές Vue είναι λειτουργίες που παρακολουθούν τις αλλαγές σε μια αντιδραστική ιδιότητα και ανταποκρίνονται ανάλογα. Οι παρατηρητές σάς επιτρέπουν να αντιδράτε σε γεγονότα και τροποποιήσεις δεδομένων.

Για να χρησιμοποιήσετε ένα πρόγραμμα παρακολούθησης, εισαγάγετε το παρακολουθώ λειτουργία από το vue πακέτο στο σενάριό σας:

<scriptsetup>
import { watch } from 'vue';
script>

Τώρα μπορείτε να χρησιμοποιήσετε τη λειτουργία ρολογιού για να εφαρμόσετε ένα πρόγραμμα παρακολούθησης στο στοιχείο Vue. Εδώ είναι ένα απλό παράδειγμα:

<template>
<div>
<p>{{ user }}p>
<button @click="changeName">Change Namebutton>
div>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
 user.value = 'Victor'; // Change the user's name
};
watch(user, (newUser, oldUser) => {
 alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
script>

Αυτό το απλό στοιχείο χρησιμοποιεί τη λειτουργία ρολογιού για να παρακολουθεί την αλλαγή στο όνομα ενός χρήστη. Η ενότητα προτύπου του αποσπάσματος ορίζει τη δομή HTML του στοιχείου, η οποία περιλαμβάνει α Π ετικέτα που εμφανίζει την τιμή της μεταβλητής αντιδραστικής χρήστη.

Το πρότυπο περιέχει επίσης ένα στοιχείο κουμπιού, με α άλλαξε όνομα λειτουργία επισυνάπτεται σε ένα πρόγραμμα ακρόασης συμβάντων κλικ. Όταν αλλάξει η μεταβλητή χρήστη, το Vue ενεργοποιεί τη λειτουργία επανάκλησης. Η λειτουργία επανάκλησης εμφανίζει μια ειδοποίηση: "Το όνομα χρήστη άλλαξε από "Chinedu" σε "Victor".

Σύγκριση παρατηρητών με υπολογισμένες ιδιότητες

Είναι σημαντικό να κατανοήσουμε τη διαφορά μεταξύ των παρατηρητών και των υπολογιστικών ιδιοτήτων. Αν και χρησιμοποιούνται και τα δύο ως εργαλεία αντιδραστικότητας στο Vue, θα πρέπει να τα χρησιμοποιήσετε για διαφορετικούς σκοπούς.

Για παράδειγμα, θα μπορούσατε να υπολογίσετε το άθροισμα της ηλικίας ενός πατέρα και ενός γιου με παρατηρητές, ως εξής:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const father = ref();
const son = ref();
const total = ref();
watch(son, (newAge, oldAge) => {
 total.value = Number(father.value) + Number(newAge)
})
watch(father, (newAge, oldAge) => {
 total.value = Number(newAge) + Number(son.value)
})
script>

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

Στη συνέχεια, το απόσπασμα χρησιμοποιεί δύο παρακολουθώ λειτουργίες για να παρακολουθείτε την ηλικία του γιου και του πατέρα. Για κάθε ηλικία, είτε πατέρα είτε γιο, το απόσπασμα συνοψίζει τη νέα τιμή με την ηλικία της άλλης. Στη συνέχεια αποθηκεύει το αποτέλεσμα στο σύνολο αντιδραστική μεταβλητή.

Εξετάστε το ίδιο σενάριο στο παραπάνω απόσπασμα με ένα σενάριο που χρησιμοποιεί υπολογισμένες ιδιότητες:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, computed } from 'vue';
const father = ref();
const son = ref();
const total = computed(() => {
 return Number(father.value) + Number(son.value);
});
script>

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

Ακόμα κι αν μπορείτε να λάβετε το σύνολο των δύο ηλικιών με παρατηρητές, είναι καλύτερο να το κάνετε με υπολογισμένες ιδιότητες. Η χρήση παρατηρητών σε αυτήν την κατάσταση μπορεί να οδηγήσει σε πιο αργούς χρόνους φόρτωσης και πιο δύσκολο εντοπισμό σφαλμάτων απλώς και μόνο επειδή περιλαμβάνει περισσότερο κώδικα.

Μην χρησιμοποιείτε παρατηρητές ως αντικατάσταση για υπολογισμένες ιδιότητες. Χρησιμοποιήστε προγράμματα παρακολούθησης για να παρακολουθείτε και να αντιδράτε σε αλλαγές δεδομένων και να υπολογίζετε ιδιότητες όταν θέλετε να αντλήσετε νέα δεδομένα από υπάρχοντα αντιδραστικά δεδομένα.

ο άμεσος Η επιλογή είναι μια διαμόρφωση που μπορείτε να χρησιμοποιήσετε κατά τη δημιουργία ενός παρατηρητή. Αυτή η επιλογή καθορίζει εάν το πρόγραμμα παρακολούθησης θα πρέπει να ενεργοποιήσει την επανάκλησή του αμέσως μετά την προσάρτηση του στοιχείου από το Vue.

Ακολουθεί ένα παράδειγμα ενός στοιχείου που χρησιμοποιεί ένα πρόγραμμα παρακολούθησης με την άμεση επιλογή:

<scriptsetup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
 count,
 (newCount, oldCount) => {
 console.log(`Count changed from ${oldCount} to ${newCount}`);
 },
 { immediate: true }
);
script>

Στο παραπάνω απόσπασμα, το πρόγραμμα παρακολούθησης θα εκτελέσει την επανάκλησή του αμέσως μετά την προετοιμασία του στοιχείου και θα καταγράψει το "Count change from undefined to 10" στην κονσόλα. Αυτό δείχνει ότι η αρχική μεταβλητή ήταν απροσδιόριστη πριν ο Vue εισαγάγει την τιμή του 10 στο count ref.

Η άμεση επιλογή μπορεί να είναι χρήσιμη σε σενάρια όπου θέλετε να εκτελέσετε μια αρχική ενέργεια ή προετοιμασία με βάση την τρέχουσα τιμή της ιδιότητας παρακολούθησης. Για παράδειγμα, όταν χρειάζεστε η εφαρμογή σας για λήψη δεδομένων από ένα API μόλις το Vue προσαρτήσει ένα στοιχείο.

Η επιλογή Deep είναι διαθέσιμη στο Vue Watchers

ο βαθύς Η επιλογή που είναι διαθέσιμη όταν εργάζεστε με παρατηρητές στο Vue επιτρέπει τη βαθιά παρατήρηση των αλλαγών εντός ένθετων αντικειμένων ή συστοιχιών. Όταν έχει οριστεί σε αληθής, ο παρατηρητής μπορεί να ανιχνεύσει αλλαγές σε ένθετες ιδιότητες.

Ακολουθεί ένα παράδειγμα στοιχείου Vue με την επιλογή σε βάθος:

<scriptsetup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 },
 { deep: true }
);
// This will trigger the watcher because it's a deep change
data.value.length = 43;
script>

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

Χωρίς την επιλογή βαθιάς ρύθμισης σε true, η λειτουργία ρολογιού δεν θα παρατηρήσει αλλαγές στο αντικείμενο. Ωστόσο, το Vue παρακολουθεί όλες τις ένθετες και βαθιές αλλαγές χωρίς την επιλογή σε βάθος όταν αρχικοποιείτε τη μεταβλητή δεδομένων ως αντιδραστικό αντικείμενο:

<scriptsetup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 }
);
// This will trigger the watcher because it changes a reactive object
data.length = 43;
script>

Η συνάρτηση παρακολούθησης στο παραπάνω απόσπασμα θα καταγραφεί στην κονσόλα που άλλαξαν τα δεδομένα επειδή η μεταβλητή δεδομένων είναι ένα αντιδραστικό αντικείμενο.

Δημιουργήστε καλύτερες εφαρμογές με το Vue Watchers

Οι παρατηρητές του Vue μπορούν να σας βοηθήσουν να επιτύχετε λεπτή αντιδραστικότητα στις εφαρμογές σας. Ελέγχουν τον τρόπο με τον οποίο μπορείτε να παρατηρήσετε αλλαγές στις ιδιότητες δεδομένων και να εκτελέσετε προσαρμοσμένη λογική ως απάντηση.

Η κατανόηση του πότε πρέπει να χρησιμοποιείτε παρατηρητές, τις διαφορές τους από τις υπολογισμένες ιδιότητες και επιλογές όπως το άμεσο και το βαθύ μπορεί να βελτιώσει σημαντικά την ικανότητά σας να δημιουργείτε εφαρμογές Vue με μεγάλη απόκριση.