Scopri di più sugli osservatori Vue.js per migliorare lo sviluppo della tua app Web

Punti chiave

• I framework JavaScript come Vue offrono funzionalità come architettura dei componenti, gestione dello stato e routing per semplificare lo sviluppo di app Web.
• Gli osservatori Vue sono funzioni che monitorano i cambiamenti nelle proprietà reattive e consentono di reagire agli eventi e alla modifica dei dati.
• Confrontando gli osservatori con le proprietà calcolate, le proprietà calcolate sono più concise e più facili da leggere, con conseguenti prestazioni e debug migliori.

I framework JavaScript sono diventati una parte vitale dello sviluppo web. Ciò è dovuto alle loro funzionalità facilmente accessibili, tra cui l'architettura dei componenti, la gestione dello stato e il routing. Questi aiutano a ridurre lo stress, l'impegno e il tempo necessari per creare un'app Web da zero.

Vue, uno di questi framework, offre molte funzionalità per accelerare lo sviluppo. La funzione di controllo consente di monitorare i valori delle variabili e delle espressioni durante l'esecuzione del programma.

Cosa sono gli osservatori in Vue?

Gli osservatori Vue sono funzioni che monitorano i cambiamenti in una proprietà reattiva e rispondono di conseguenza. Gli osservatori ti consentono di reagire agli eventi e alla modifica dei dati.

Per utilizzare un osservatore, importa il file orologio funzione da vista pacchetto nel tuo script:

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

Ora puoi utilizzare la funzione watch per implementare un watcher nel tuo componente Vue. Ecco un semplice esempio:

<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>

Questo semplice componente utilizza la funzione di controllo per monitorare la modifica del nome di un utente. La sezione del modello dello snippet definisce la struttura HTML del componente, che include a P tag che visualizza il valore della variabile reattiva dell'utente.

Il modello contiene anche un elemento pulsante, con a cambia nome funzione allegato a un listener di eventi clic. Quando la variabile utente cambia, Vue attiva la funzione di callback. La funzione di richiamata visualizza un avviso: "Il nome utente è cambiato da "Chinedu" a "Victor"."

Confronto tra osservatori e proprietà calcolate

È importante comprendere la differenza tra osservatori e proprietà calcolate. Sebbene siano entrambi utilizzati come strumenti di reattività in Vue, dovresti usarli per scopi diversi.

Ad esempio, potresti calcolare la somma dell'età di un padre e di un figlio con gli osservatori, in questo modo:

<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>

Questo componente Vue utilizza gli osservatori per ottenere la somma delle età del padre e del figlio. Per fare ciò, crea una nuova variabile reattiva, totale. Puoi creare un file variabile reattiva quando usi l'API Composition di Vue.

Lo snippet ne impiega quindi due orologio funzioni per monitorare l'età del figlio e del padre. Per ogni età, padre o figlio, lo snippet somma il nuovo valore con l'età dell'altro. Quindi salva il risultato nel file totale variabile reattiva.

Considera lo stesso scenario nello snippet precedente con uno che utilizza proprietà calcolate:

<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>

Questo snippet, rispetto al precedente, è più conciso e più facile da leggere. Lo snippet ottiene la somma dell'età del padre e del figlio e la salva in un riferimento calcolato (variabile), totale. La sezione del modello visualizza quindi la variabile totale utilizzando interpolazione, una tecnica di associazione dati in Vue.

Anche se è possibile ottenere il totale delle due età con gli osservatori, è meglio farlo con proprietà calcolate. L'utilizzo degli osservatori in questa situazione può portare a tempi di caricamento più lenti e a un debug più difficile semplicemente perché coinvolge più codice.

Non utilizzare gli osservatori in sostituzione delle proprietà calcolate. Utilizza gli osservatori per monitorare e reagire alle modifiche dei dati e alle proprietà calcolate quando desideri derivare nuovi dati da dati reattivi esistenti.

IL immediato L'opzione è una configurazione che puoi utilizzare durante la creazione di un osservatore. Questa opzione determina se l'osservatore deve attivare la richiamata immediatamente dopo che Vue ha montato il componente.

Ecco un esempio di un componente che utilizza un watcher con l'opzione immediata:

<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>

Nello snippet sopra, l'osservatore eseguirà la richiamata immediatamente dopo l'inizializzazione del componente e registrerà il "Conteggio modificato da non definito a 10" sulla console. Ciò mostra che la variabile iniziale non era definita prima che Vue iniettasse il valore 10 nel conteggio ref.

L'opzione immediata può essere utile negli scenari in cui si desidera eseguire un'azione iniziale o un'inizializzazione in base al valore corrente della proprietà controllata. Ad esempio, quando hai bisogno che la tua app recuperi i dati da un'API una volta che Vue monta un componente.

L'opzione Deep disponibile in Vue Watchers

IL profondo L'opzione disponibile quando si lavora con gli osservatori in Vue consente l'osservazione approfondita dei cambiamenti all'interno di oggetti o array nidificati. Quando impostato su VERO, l'osservatore può rilevare modifiche all'interno delle proprietà nidificate.

Ecco un esempio di un componente Vue con l'opzione deep:

<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>

Lo snippet sopra inizializza il file dati ref con un oggetto contenente a lunghezza proprietà. Lo snippet imposta l'opzione profonda su VERO. Quindi registra nella console che i dati sono cambiati da quando la proprietà length è cambiata in 43.

Senza l'opzione deep impostata su true, la funzione orologio non noterà alcuna modifica all'oggetto. Tuttavia, Vue tiene traccia di tutte le modifiche annidate e profonde senza l'opzione profonda quando inizializzi la variabile dati come oggetto reattivo:

<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>

La funzione watch nello snippet precedente registrerà nella console la modifica dei dati perché la variabile data è un oggetto reattivo.

Crea app migliori con Vue Watchers

Gli osservatori di Vue possono aiutarti a ottenere una reattività a grana fine nelle tue applicazioni. Controllano il modo in cui puoi osservare le modifiche nelle proprietà dei dati ed eseguire la logica personalizzata in risposta.

Comprendere quando utilizzare gli osservatori, le loro differenze rispetto alle proprietà calcolate e opzioni come immediato e profondo può migliorare significativamente la tua capacità di creare applicazioni Vue molto reattive.