beforeUpdate وafterUpdate
اربط دورة التحديث لفحص DOM أو تعديله قبل التغييرات التفاعلية وبعدها
beforeUpdate وafterUpdate درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
متى تُشغَّل
تُشغَّل beforeUpdate قبل تطبيق التحديثات التفاعلية على DOM، بينما تُشغَّل afterUpdate مباشرةً بعدها.
حالات الاستخدام
استخدمهما لقراءة قياسات DOM قبل التغييرات، وضبط موضع التمرير بعدها.
التمرير التلقائي للمحادثة
من الاستخدامات الشائعة تمرير المحادثة تلقائيًا إلى الأسفل، ولكن فقط عندما يكون المستخدم موجودًا بالفعل في الأسفل.
let div, autoscroll;
beforeUpdate(() => {
autoscroll = div && (div.scrollTop + div.offsetHeight >= div.scrollHeight - 20);
});
afterUpdate(() => {
if (autoscroll) div.scrollTo(0, div.scrollHeight);
});تُشغَّل كثيرًا
تُشغَّل دوال رد النداء هذه عند كل تحديث. اجعل تنفيذها سريعًا.
السلوك على الخادم
لا تُشغَّل هذه الدوال أثناء SSR. تعامل معها على أنها خاصة بالمتصفح فقط.
استخدمهما بحذر
يمكن تطبيق الحالة التي تحفظها في beforeUpdate داخل afterUpdate لتنفيذ أنماط القياس والتطبيق.
تجنّبها في معظم المنطق
ينبغي وضع معظم المنطق في العبارات التفاعلية أو الإجراءات. استخدم هذه الدوال لقياس DOM فقط.
ترتيب التنفيذ
الترتيب في كل تحديث: العبارات التفاعلية -> beforeUpdate -> تحديث DOM -> afterUpdate.
التركيب الأول
تُشغَّل كلتاهما عند التركيب الأول بالإضافة إلى التحديثات اللاحقة. احسب حساب التشغيل الأولي.
الدمج مع bind:this
تحتاج إلى مرجع لعنصر DOM لإجراء القياس. استخدم bind:this.
بديل tick
بالنسبة إلى القياسات التي تُجرى مرة واحدة بعد تغيير، قد يكون await tick() أوضح.
تحقّق سريع
متى تُشغَّل afterUpdate؟
مراجعة
تلتقط beforeUpdate الحالة قبل التغيير، بينما تقرأ afterUpdate DOM المحدّث حديثًا أو تعدّله.
الأسئلة الشائعة
هل درس «beforeUpdate وafterUpdate» مجاني؟
نعم — نص درس «beforeUpdate وafterUpdate» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «beforeUpdate وafterUpdate»؟
اربط دورة التحديث لفحص DOM أو تعديله قبل التغييرات التفاعلية وبعدها تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «beforeUpdate وafterUpdate»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- onMount: التشغيل بعد التصيير
- onDestroy: التنظيف
- beforeUpdate وafterUpdate
- tick(): انتظار تحديثات DOM