تعرف على Vue.js Watchers لتحسين تطوير تطبيقات الويب لديك

الماخذ الرئيسية

• توفر أطر عمل JavaScript مثل Vue ميزات مثل بنية المكونات وإدارة الحالة والتوجيه لتبسيط تطوير تطبيقات الويب.
• مراقبو Vue عبارة عن وظائف تراقب التغييرات في الخصائص التفاعلية وتسمح لك بالتفاعل مع الأحداث وتعديل البيانات.
• بمقارنة المراقبين بالخصائص المحسوبة، تكون الخصائص المحسوبة أكثر إيجازًا وأسهل في القراءة، مما يؤدي إلى أداء أفضل وتصحيح الأخطاء.

أصبحت أطر عمل JavaScript جزءًا حيويًا من تطوير الويب. ويرجع ذلك إلى ميزاتها التي يمكن الوصول إليها بسهولة، بما في ذلك بنية المكونات وإدارة الحالة والتوجيه. يساعد ذلك في تقليل الضغط والجهد والوقت اللازم لإنشاء تطبيق ويب من البداية.

يقدم Vue، أحد هذه الأطر، العديد من الميزات لتسريع عملية التطوير. تتيح لك ميزة المراقبة مراقبة قيم المتغيرات والتعبيرات أثناء تنفيذ البرنامج.

ما هم المراقبون في 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 هذا المراقبين للحصول على مجموع عمر الأب والابن. وللقيام بذلك، فإنه يقوم بإنشاء متغير تفاعلي جديد، المجموع. يمكنك إنشاء متغير رد الفعل عند استخدام Vue's 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.

وحتى لو تمكنت من الحصول على مجموع العمرين بالمراقبين، فمن الأفضل أن تفعل ذلك بالخصائص المحسوبة. يمكن أن يؤدي استخدام المراقبين في هذه الحالة إلى أوقات تحميل أبطأ وتصحيح الأخطاء بشكل أكثر صعوبة، وذلك ببساطة لأنه يتضمن المزيد من التعليمات البرمجية.

لا تستخدم المراقبين كبديل للخصائص المحسوبة. استخدم المراقبين لمراقبة تغييرات البيانات والتفاعل معها، والخصائص المحسوبة عندما تريد استخلاص بيانات جديدة من البيانات التفاعلية الموجودة.

ال مباشر الخيار هو تكوين يمكنك استخدامه عند إنشاء مراقب. يحدد هذا الخيار ما إذا كان يجب على المراقب تشغيل رد الاتصال الخاص به فورًا بعد قيام 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>

في المقتطف أعلاه، سيقوم المراقب بتنفيذ رد الاتصال فورًا عند تهيئة المكون ويسجل "تم تغيير العدد من غير محدد إلى 10" إلى وحدة التحكم. يوضح هذا أن المتغير الأولي لم يكن محددًا قبل أن تقوم Vue بحقن القيمة 10 في الرقم المرجعي.

يمكن أن يكون الخيار الفوري مفيدًا في السيناريوهات التي تريد فيها تنفيذ إجراء أولي أو تهيئة استنادًا إلى القيمة الحالية للخاصية المراقبة. على سبيل المثال، عندما تحتاج إلى أن يقوم تطبيقك بجلب البيانات من واجهة برمجة التطبيقات (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>

يقوم المقتطف أعلاه بتهيئة بيانات المرجع مع كائن يحتوي على أ طول ملكية. يقوم المقتطف بتعيين الخيار العميق على حقيقي. ثم يسجل إلى وحدة التحكم أن البيانات قد تغيرت منذ أن تغيرت خاصية الطول إليها 43.

بدون تعيين الخيار العميق على صحيح، لن تلاحظ وظيفة المراقبة أي تغييرات على الكائن. ومع ذلك، يتتبع 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 سريعة الاستجابة.