השתמש בצופים כדי לנטר שינויים וליישם התנהגות בצורה אינטואיטיבית יותר.

טייק אווי מפתח

  • מסגרות JavaScript כמו Vue מציעות תכונות כגון ארכיטקטורת רכיבים, ניהול מצבים וניתוב כדי לפשט את פיתוח אפליקציות האינטרנט.
  • צופי Vue הן פונקציות המנטרות שינויים במאפיינים תגובתיים ומאפשרות לך להגיב לאירועים ולשינויים בנתונים.
  • בהשוואת צופים למאפיינים מחושבים, מאפיינים מחושבים הם תמציתיים יותר וקלים יותר לקריאה, וכתוצאה מכך ביצועים טובים יותר ואיתור באגים.

מסגרות JavaScript הפכו לחלק חיוני בפיתוח אתרים. זה נובע מהתכונות הנגישות בקלות, כולל ארכיטקטורת רכיבים, ניהול מצבים וניתוב. אלה עוזרים להפחית את הלחץ, המאמץ והזמן הדרושים לבניית אפליקציית אינטרנט מאפס.

Vue, אחת מהמסגרות הללו, מציעה תכונות רבות כדי להאיץ את הפיתוח. תכונת הצפייה מאפשרת לך לעקוב אחר הערכים של משתנים וביטויים במהלך הפעלת התוכנית.

מה הם צופים ב-Vue?

צופי Vue הם פונקציות שמנטרות שינויים בנכס תגובתי ומגיבות בהתאם. Watchers מאפשרים לך להגיב לאירועים ולשינויים בנתונים.

כדי להשתמש ב-watcher, ייבא את שעון פונקציה מה vue חבילה בסקריפט שלך:

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

כעת אתה יכול להשתמש בפונקציית השעון כדי ליישם צופה ברכיב ה-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".

השוואת Watchers עם מאפיינים מחושבים

חשוב להבין את ההבדל בין צופים למאפיינים מחושבים. למרות ששניהם משמשים ככלי תגובתיות ב-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 זה משתמש בצופים כדי לקבל את סכום הגילאים של האב והבן. לשם כך, הוא יוצר משתנה תגובתי חדש, סה"כ. אתה יכול ליצור א משתנה תגובתי כאשר אתה משתמש ב-Vue Composition API.

לאחר מכן, הקטע משתמש בשניים שעון מתפקד כדי לצפות בגילאי הבן והאב. עבור כל גיל, אב או בן, הקטע מסכם את הערך החדש עם גילו של האחר. לאחר מכן הוא שומר את התוצאה ב- סה"כ משתנה תגובתי.

שקול את אותו תרחיש בקטע הנ"ל לתרחיש שמשתמש במאפיינים מחושבים:

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

גם אם אתה יכול לקבל את סך שני הגילאים עם watchers, עדיף לעשות זאת עם מאפיינים מחושבים. שימוש ב-watchers במצב זה יכול להוביל לזמני טעינה איטיים יותר ולניפוי באגים קשה יותר פשוט מכיוון שהוא כולל יותר קוד.

אל תשתמש ב-watchers כתחליף למאפיינים מחושבים. השתמש בצופים כדי לנטר ולהגיב לשינויים בנתונים, ובמאפיינים מחושבים כאשר אתה רוצה להפיק נתונים חדשים מנתונים תגובתיים קיימים.

ה מִיָדִי אפשרות היא תצורה שבה תוכל להשתמש בעת יצירת צופה. אפשרות זו קובעת אם הצופה צריך להפעיל את ההתקשרות שלו מיד לאחר ש-Vue הרכיב את הרכיב.

הנה דוגמה לרכיב המשתמש ב-watcher עם האפשרות המיידית:

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

בקטע שלמעלה, הצופה יבצע את ההתקשרות חזרה מיד עם אתחול הרכיב ויומן את "הספירה השתנתה מבלתי מוגדר ל-10" לקונסולה. זה מראה שהמשתנה הראשוני לא היה מוגדר לפני ש-Vue הזריק את הערך של 10 ל-count ref.

האפשרות המיידית יכולה להיות שימושית בתרחישים שבהם ברצונך לבצע פעולה ראשונית או אתחול על סמך הערך הנוכחי של הנכס הנצפה. לדוגמה, כאשר אתה צריך שהאפליקציה שלך תביא נתונים מ-API לאחר ש-Vue מעלה רכיב.

האופציה העמוקה הזמינה ב-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 יכולים לעזור לך להשיג תגובתיות עדינה ביישומים שלך. הם שולטים כיצד תוכל לצפות בשינויים במאפייני הנתונים ולהפעיל לוגיקה מותאמת אישית בתגובה.

הבנת מתי להשתמש ב-watchers, ההבדלים שלהם ממאפיינים מחושבים ואפשרויות כמו מיידי ועומק יכולים לשפר משמעותית את היכולת שלך לבנות יישומי Vue מגיבים מאוד.