Ismerje meg a Vue.js figyelőket a webalkalmazások fejlesztése érdekében

Kulcs elvitelek

• Az olyan JavaScript-keretrendszerek, mint a Vue, olyan funkciókat kínálnak, mint az összetevő-architektúra, állapotkezelés és útválasztás a webalkalmazás-fejlesztés egyszerűsítésére.
• A Vue figyelők olyan funkciók, amelyek figyelik a reaktív tulajdonságok változásait, és lehetővé teszik az eseményekre és az adatok módosítására való reagálást.
• Ha összehasonlítjuk a figyelőket a számított tulajdonságokkal, a kiszámított tulajdonságok tömörebbek és könnyebben olvashatók, ami jobb teljesítményt és hibakeresést eredményez.

A JavaScript keretrendszerek a webfejlesztés elengedhetetlen részévé váltak. Ez a könnyen elérhető szolgáltatásaiknak köszönhető, beleértve az összetevő-architektúrát, az állapotkezelést és az útválasztást. Ezek segítenek csökkenteni a stresszt, az erőfeszítést és az időt, amely egy webalkalmazás a semmiből való létrehozásához szükséges.

A Vue, az egyik ilyen keretrendszer, számos funkciót kínál a fejlesztés felgyorsítására. A figyelő funkció lehetővé teszi a változók és kifejezések értékeinek figyelését a program végrehajtása során.

Mik azok a figyelők a Vue-ben?

A Vue figyelők olyan funkciók, amelyek figyelik a reaktív tulajdonság változásait, és ennek megfelelően reagálnak. A figyelők segítségével reagálhat az eseményekre és az adatok módosítására.

Figyelő használatához importálja a néz funkció a vue csomag a szkriptedben:

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

Most már használhatja az óra funkciót, hogy megfigyelőt építsen be a Vue összetevőbe. Íme egy egyszerű példa:

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

Ez az egyszerű összetevő az óra funkciót használja a felhasználónév változásának figyelésére. A kódrészlet sablon szakasza határozza meg az összetevő HTML-struktúráját, amely magában foglalja a p címke, amely a felhasználói reaktív változó értékét jeleníti meg.

A sablon egy gombelemet is tartalmaz, a ChangeName funkció kattintási eseményfigyelőhöz csatolva. Amikor a felhasználói változó megváltozik, a Vue elindítja a visszahívási funkciót. A visszahívási funkció egy figyelmeztetést jelenít meg: „A felhasználónév „Chinedu”-ról „Victor”-ra változott.

Figyelők összehasonlítása számított tulajdonságokkal

Fontos megérteni a különbséget a figyelők és a számított tulajdonságok között. Bár mindkettőt reaktivitási eszközként használják a Vue-ban, különböző célokra kell használni őket.

Például kiszámolhatja egy apa és fia életkorának összegét figyelőkkel, így:

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

Ez a Vue komponens figyelőket használ az apa és fia életkorának összegzéséhez. Ehhez létrehoz egy új reaktív változót, teljes. Létrehozhat a reaktív változó, ha a Vue’s Composition API-t használja.

A részlet ezután kettőt alkalmaz néz funkciókkal figyeli a fia és az apa életkorát. Minden kor esetében, legyen az apa vagy fia, a részlet összegzi az új értéket a másik életkorával. Ezután elmenti az eredményt a teljes reaktív változó.

Tekintsük a fenti kódrészletben ugyanazt a forgatókönyvet, amely számított tulajdonságokat használ:

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

Ez a részlet az előbbihez képest tömörebb és könnyebben olvasható. A részlet megkapja az apa és a fia életkorának összegét, és elmenti egy számított ref-ben (változóban), teljes. A sablon szakasz ezután a teljes változót jeleníti meg a segítségével interpoláció, egy adatkötési technika a Vue-ban.

Még akkor is, ha megfigyelőkkel meg lehet kapni a két kor összértékét, jobb, ha ezt a számított tulajdonságokkal teszi. A figyelők használata ebben a helyzetben lassabb betöltési időt és nehezebb hibakeresést eredményezhet egyszerűen azért, mert több kódot igényel.

Ne használjon figyelőket a számított tulajdonságok helyettesítésére. Használjon figyelőket az adatok változásainak figyelésére és reagálására, valamint számítsa ki a tulajdonságokat, ha új adatokat szeretne származtatni a meglévő reaktív adatokból.

A azonnali Az opció egy megfigyelő létrehozásakor használható konfiguráció. Ez az opció határozza meg, hogy a figyelő azonnal indítsa-e visszahívását, miután a Vue felcsatolta az összetevőt.

Íme egy példa egy komponensre, amely figyelőt használ az azonnali opcióval:

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

A fenti részletben a figyelő azonnal végrehajtja a visszahívást az összetevő inicializálása után, és a konzolba naplózza a „A számláló meghatározatlanról 10-re változott”. Ez azt mutatja, hogy a kezdeti változó definiálatlan volt, mielőtt a Vue beadta a 10-es értéket a count ref.

Az azonnali opció hasznos lehet olyan forgatókönyvekben, amikor a figyelt tulajdonság aktuális értéke alapján kezdeti műveletet vagy inicializálást szeretne végrehajtani. Például, amikor az alkalmazásnak adatokat kell lekérnie egy API-ból, miután a Vue csatlakoztat egy összetevőt.

A Vue Watchersben elérhető mély opció

A mély A Vue figyelőkkel végzett munka során elérhető opció lehetővé teszi a beágyazott objektumok vagy tömbök változásainak mélyreható megfigyelését. Amikor be van állítva igaz, a figyelő képes észlelni a beágyazott tulajdonságokon belüli változásokat.

Íme egy példa a Vue komponensre a mély opcióval:

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

A fenti részlet inicializálja a adat ref egy a-t tartalmazó tárggyal hossz ingatlan. A részlet a mély beállítást állítja be igaz. Ezután naplózza a konzolon, hogy az adatok megváltoztak, mióta a hossz tulajdonság a következőre módosult 43.

A mély beállítás igaz értékre állítása nélkül a figyelő funkció nem észlel semmilyen változást az objektumon. A Vue azonban nyomon követi az összes beágyazott és mély változást a deep beállítás nélkül, amikor az adatváltozót reaktív objektumként inicializálja:

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

A fenti kódrészletben lévő figyelő funkció naplózza a konzolon, hogy az adatok megváltoztak, mert az adatváltozó egy reaktív objektum.

Készítsen jobb alkalmazásokat a Vue Watchers segítségével

A Vue figyelői segíthetnek finom szemcsés reaktivitás elérésében alkalmazásaiban. Szabályozzák, hogyan figyelheti meg az adattulajdonságok változásait, és hogyan futtathat egyéni logikát válaszul.

Ha megérti, hogy mikor kell figyelőket használni, milyen különbségek vannak a számított tulajdonságoktól, valamint olyan lehetőségek, mint az azonnali és a mély, jelentősen javíthatja a nagyon érzékeny Vue-alkalmazások készítésének képességét.