التصنيفات: تطوير الويب (Web Development) | شروحات برمجية (Tutorials)

ازاي Vue 3.4 و 3.5 ريحونا؟ تفاصيل الـ defineModel وتطور الـ Composition API

يا هلا بيك يا سيدي، لو انت مبرمج شغال بـ تطوير واجهات الويب (Web Development) وخصوصاً بتقنية فيو دوت إس (Vue.js)، فأكيد عانيت في يوم من الأيام من كتر البويلر بلايت (Boilerplate) أو الكود المتكرر اللي كنا بنكتبه عشان نعمل ربط ثنائي الاتجاه للبيانات (Two-way Data Binding). كنت عشان تباست قيمة من الأب لابن والعكس، محتاج تكتب props و emits وتعمل حوار طويل عريض في الـ update:modelValue.

بس خليني أقولك إن فريق فوي (Vue Team) ممثل في إيفان يو (Evan You) مقعدوش راضيين بالوضع ده؛ ومع نزول التحديثات الجديدة وتحديداً الإصدارات Vue 3.4 و Vue 3.5، الدنيا اتفتحت وبقى الكود أنظف بكتير وأسهل في القراءة والصيانة. تعالى في المقال ده ناخد لفة سريعة وعميقة نفهم بيها إيه اللي اتغير وإزاي نستغل الميزات دي صح.

وجع زمان: ليه كنا بنعاني مع الـ Two-way Binding؟

زمان قبل ما تظهر الماكروهات الحديثة في فيو (Vue Macros)، لو كنت عايز تعمل مكون (Component) زي إندبوت (Input) مخصص وتربطه بالـ v-model، كنت بتضطر تكتب كود شبه ده:

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input 
    :value="modelValue" 
    @input="$emit('update:modelValue', $event.target.value)" 
  />
</template>

طبعاً كود مقرف ومتكرر، وكل ما تعمل مكون جديد تضطر تعيد نفس الحوار. هنا بقى جه دور الـ ماكرو (Macro) السحري اللي غير قواعد اللعبة.

ثورة الـ defineModel في Vue 3.4: اختصار الطريق

في التحديثات الأخيرة وبداية من الإصدارات المستقرة، اتحولت خاصية defineModel لأنها تكون ميزة أساسية مستقرة (Stable feature) ومش محتاج تعملها إعدادات معقدة. الخاصية دي باختصار بتختصر عليك الهيصة دي كلها في سطر واحد بس!

تعالا شوف الكود بقى عامل إزاي:

<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

بس كده! تخيل السطر البسيط ده بيعمل إيه؟ بيعرف الـ prop اللي اسمها modelValue وبيعمل الـ emit للحدث update:modelValue في الخلفية لوحده، وبيديك متغير (Variable) تقدر تستخدمه وتعدل عليه مباشرة كأنه ref عادي جداً.

التحسينات الخارقة في Vue 3.5: الأداء وإدارة الذاكرة

لما طلعنا على الإصدار Vue 3.5، الموضوع مكنش بس ميزات برمجية، ده كان فيه نقلة نوعية في الأداء (Performance) وإدارة الذاكرة (Memory Management). الـ ريأكتيفيتي (Reactivity System) بقى أسرع بكتير واستهلاك الذاكرة قل بشكل ملحوظ بفضل إعادة كتابة بعض أجزاء النواة (Core) باستخدام هياكل بيانات أحدث.

كمان من الحاجات الجامدة جداً في 3.5 هي التحسينات على الـ defineModel نفسها، زي إمكانية إعطاء قيمة افتراضية (Default Value) بكل سهولة، أو التعامل مع أكتر من نموذج (Multiple v-models) جوه نفس المكون من غير أي صداع:

<script setup>
const title = defineModel('title')
const likes = defineModel('likes')
</script>

<template>
  <input v-model="title" />
  <input v-model.number="likes" type="number" />
</template>

شوف الجمال والنظافة؟ بقيت تقدر تربط أكتر من خاصية بكل سهولة وتحدد اسم الموديل زي v-model:title و v-model:likes من غير ما تكتب كود طويل لـ الـ emits والـ props.

تطور الـ Composition API وكتابة كود أنظف

مع تطور هيكل الـ Composition API في الإصدارات دي، بقى التركيز كله على إن المبرمج يكتب كود بيعبر عن نفسه (Self-documenting code). استخدام أدوات زي defineOptions و defineSlots بقى أبسط وأكثر تكامل مع طراز TypeScript اللي بقى دعمه أسرع وأقوى بكتير في النسخ الحديثة.

لما تيجي تعمل تطوير مواقع (Web Development) باستخدام الفوائد دي، هتلاحظ إن حجم الكود (Bundle Size) قل، وعدد الأخطاء الناتجة عن كتابة الـ props غلط بقى يكاد يكون معدوماً لأن الـ TypeScript بيغطي وراك كل صغيرة وكبيرة.

نصيحة من أخ: إزاي تطور مهاراتك في Vue؟

عشان تطلع أقصى استفادة من التحديثات دي، نصيحتي ليك كأخ أكبر: متكتفيش بالقراءة وبس. افتح مشروع تجريبي (Side Project) حالا وابدأ احدث النسخ عندك لآخر إصدار من Vue 3.5. جرب تكتب مكونات معقدة بالـ defineModel وشوف بنفسك إزاي السطور قلت والكود وبقى أشيك وأسهل في القراءة. البرمجة مهارة عملية، وكل ما تدا ايدك في الكود وتجرب بنفسك، كل ما تثبت المعلومة في دماغك وتقوي نفسك في سوق العمل.