Vue Academy · درس

‏onUpdated وonBeforeUpdate

التفاعل مع تغيّرات البيانات التفاعلية، وتجنّب حلقات التحديث اللانهائية في onUpdated

‏onUpdated وonBeforeUpdate درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

الخطافات المحيطة بالتحديثات

عند تغيّر البيانات التفاعلية، يعيد Vue عرض المكوّن. ويحيط بهذا التحديث خطافان: يُستدعى onBeforeUpdate قبل تحديث DOM، ويُستدعى onUpdated بعده.

onUpdated: بعد التحديث

يُشغَّل onUpdated بعد تحديث DOM ليعكس الحالة التفاعلية الجديدة. عند هذه النقطة، يتطابق DOM المعروض مع بياناتكم.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

قراءة DOM المحدَّث

بما أن التحديث قد اكتمل، فإن onUpdated هو المكان المناسب لقراءة الأحجام أو المواضع الجديدة للعناصر التي تعتمد على أحدث عرض.

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

فخ الحلقة اللانهائية

لا تعدّلوا الحالة التفاعلية مطلقًا داخل onUpdated. فهذا يؤدي إلى عرض آخر، يستدعي onUpdated مجددًا، فيُجري التعديل مرة أخرى — وهكذا تتشكل حلقة لانهائية تؤدي إلى تجمّد التطبيق.

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

استخدموا watch بدلًا منه

إذا أردتم الاستجابة لتغيّر قيمة محددة، فاستخدموا watch بدلًا من onUpdated. إذ يراقب watch مصدرًا واحدًا ويتجنب خطر الحلقة، بينما يُشغَّل onUpdated مع كل عرض.

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate: قبل التحديث

يُشغَّل onBeforeUpdate بعد حدوث تغيير تفاعلي، وقبل أن يحدّث Vue DOM. ويظل DOM هنا يعرض القيم القديمة.

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

حالة استخدام: لقطة قبل التحديث

بما أن onBeforeUpdate يرى DOM القديم، فهو مناسب جدًا لالتقاط لقطة قبل التغيير — مثلًا، لتسجيل موضع التمرير الحالي واستعادته بعد التحديث.

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

يُشغَّلان مع كل عرض

يُشغَّل كلا الخطافين في كل دورة تحديث، وقد يحدث ذلك كثيرًا. اجعلوا عمليات الاستدعاء الخاصة بهما خفيفة لتجنب مشكلات الأداء.

ليس للتأثيرات الجانبية على البيانات

يتعلق هذان الخطافان بـ DOM، لا ببياناتكم. وللاستجابات المعتمدة على البيانات، فضّلوا computed للقيم المشتقة أو watch للتأثيرات الجانبية على مصادر محددة.

مراجعة الترتيب

عند حدوث تغيير تفاعلي، يكون التسلسل كالآتي: تتغير الحالة، ثم يُشغَّل onBeforeUpdate مع DOM القديم، ثم يحدّث Vue DOM، وأخيرًا يُشغَّل onUpdated مع DOM الجديد.

الاختيار بينهما

onBeforeUpdate: لالتقاط حالة DOM القديمة، مثل التمرير أو التحديد.
onUpdated: لقراءة DOM الجديد بعد التحديث — لكن لا تعدّلوا الحالة التفاعلية هنا مطلقًا.

اختبار سريع

اختبروا معرفتكم بخطافات التحديث.

مراجعة

ملخص خطافات التحديث:

يُشغَّل onUpdated بعد تحديث DOM — فاقرؤوا الأحجام الجديدة هنا.
لا تعدّلوا الحالة التفاعلية داخله مطلقًا، لتجنب الحلقة اللانهائية؛ استخدموا watch بدلًا منه.
يُشغَّل onBeforeUpdate قبل التحديث مع DOM القديم — وهو مناسب جدًا للقطات.
يُشغَّل كلاهما مع كل عرض، لذا اجعلوا عملياتهما خفيفة.

الأسئلة الشائعة

هل درس «‏onUpdated وonBeforeUpdate» مجاني؟

نعم — نص درس «‏onUpdated وonBeforeUpdate» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏onUpdated وonBeforeUpdate»؟

التفاعل مع تغيّرات البيانات التفاعلية، وتجنّب حلقات التحديث اللانهائية في onUpdated تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «‏onUpdated وonBeforeUpdate»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy