المتغيرات التفاعلية باستخدام let
صرّح بالحالة التفاعلية في Svelte باستخدام تصريحات let العادية
المتغيرات التفاعلية باستخدام let درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
لا توجد واجهة API خاصة
في Svelte، تكون تصريحات let العادية في كتلة script تفاعلية. ولا يوجد ما يعادل useState.
التصريح والاستخدام
صرّح عن متغيّر وأدرجه في البنية. ويؤدي تحديثه إلى إعادة عرض الجزء الذي يعتمد عليه.
<script>
let count = 0;
</script>
<p>The count is {count}</p>التحديث عبر الإسناد
الإسناد هو المحفّز. ويخبر count = count + 1 Svelte بأن القيمة تغيّرت.
function inc() { count = count + 1; }الصيغة المختصرة للزيادة
تعمل أيضًا الصيغ المختصرة المعتادة في JS: count++ وcount += 5 وغير ذلك.
function inc() { count++; }المصفوفات والتعديل
لا يؤدي تعديل مصفوفة عبر push إلى تشغيل التفاعلية. يجب إعادة إسنادها.
items = [...items, newItem]; // ok
items.push(newItem); // does not updateالكائنات والتعديل
تنطبق القاعدة نفسها على الكائنات: استبدل المرجع، أو أعد إسناد خاصية محددة ثم أعد إسناد الكائن الأب.
user.name = "Bea";
user = user; // tell Svelte it changedأهمية الإسناد
يُدخل مترجم Svelte عمليات الإسناد ضمن آلية التتبع. أما استدعاءات الأساليب مثل push فلا يراها المترجم.
محلية أم مشتركة
ينشئ let العادي حالة محلية لمثيل مكوّن واحد. ولمشاركة الحالة بين المكوّنات، استخدم props أو stores.
القيم الأولية
يُنفَّذ الجانب الأيمن من تصريح let مرة واحدة عند تهيئة مثيل المكوّن.
الأنواع
مع lang="ts"، امنح متغيّراتك أنواعًا صريحة.
<script lang="ts">
let count: number = 0;
</script>متغيّرات متعددة
يمكنك التصريح عن العدد الذي تريده من المتغيّرات التفاعلية، في سطر واحد أو عدة أسطر.
let x = 0, y = 0;
let items = [];تحقّق سريع
ما الذي يشغّل التفاعلية؟
خلاصة
إن let العادية تفاعلية. أعد الإسناد، ولا تعدّل القيمة، لتشغيل التحديثات. وتحتاج المصفوفات والكائنات إلى تغيير مراجعها.
الأسئلة الشائعة
هل درس «المتغيرات التفاعلية باستخدام let» مجاني؟
نعم — نص درس «المتغيرات التفاعلية باستخدام let» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «المتغيرات التفاعلية باستخدام let»؟
صرّح بالحالة التفاعلية في Svelte باستخدام تصريحات let العادية تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «المتغيرات التفاعلية باستخدام let»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- بنية script وtemplate وstyle
- المتغيرات التفاعلية باستخدام let
- الاستيفاء: {expression}
- القيم المحسوبة: تصريحات $ التفاعلية