فهم التفاعلية في vue، لجعل تطبيقاتك أكثر مرونة وسلاسة

الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،

في برمجة واجهات المستخدم، يشير مفهوم التفاعلية (Reactivity) إلى العلاقة المباشرة بين البيانات والعناصر التي يراها المستخدم على الشاشة.

على سبيل المثال، إذا كانت هناك قائمة تعرض منتجات في متجر إلكتروني، وأُضيف منتج جديد أو تغيّرت تفاصيل منتج موجود، فإن القائمة تُحدِّث نفسها مباشرة ليظهر التغيير للمستخدم دون الحاجة إلى إعادة تحميل الصفحة.

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

التفاعلية بين Vue 2 و Vue 3

في إطار Vue، تُعد التفاعلية جوهر النظام الذي يتيح تحديث واجهة المستخدم تلقائيًا عند حدوث تغييرات في البيانات.

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

في Vue 2، يعتمد نظام التفاعلية على تقنية تقوم بمراقبة التغيرات على خصائص البيانات الفردية. ورغم فعاليتها، إلا أن هذا النهج يعاني من عدة قيود، مثل عدم القدرة على اكتشاف إضافة أو حذف خصائص جديدة في الكائنات، وصعوبة التعامل مع المصفوفات، هذه القيود جعلت التعامل مع التطبيقات الكبيرة أو المعقدة أقل مرونة.

مع إصدار Vue 3، تم إعادة تصميم نظام التفاعلية بشكل جذري باستخدام تقنية Proxy الحديثة، التي تتيح مراقبة الكائنات بشكل كامل، بما يشمل التغييرات على الخصائص الجديدة أو المحذوفة، بالإضافة إلى تحسين التعامل مع المصفوفات.

إلى جانب التحسينات التقنية، قدمت Vue 3 أدوات جديدة مثل reactive و ref، التي تبسط تعريف البيانات التفاعلية وتجعل الكود أكثر وضوحًا وتنظيماً. هذه الأدوات لا تقلل فقط من الجهد المطلوب لكتابة الكود، بل تساعد أيضًا في تجنب الأخطاء الشائعة.

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

شرح أهم المفاهيم

الأداة ref : تُستخدم لجعل القيم تفاعلية بشكل بسيط وفعّال؛ عند إنشاء قيمة باستخدام ref، يتم وضعها داخل كائن خاص يُمكّن Vue من تتبع أي تغييرات عليها تلقائيًا.

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

الأداة reactive : تُستخدم لإنشاء كائنات تفاعلية بالكامل؛ عند تعريف كائن باستخدام reactive، يُصبح كل خصائصه قابلة للتتبع، مما يعني أن أي تغيير على أي خاصية داخل الكائن يؤدي إلى تحديث واجهة المستخدم تلقائيًا.

تُعد reactive مثالية للتعامل مع الكائنات المعقدة التي تحتوي على عدة خصائص، حيث تُوفر طريقة سهلة ومنظمة لإدارة البيانات في التطبيقات.

الأداة computed : وهي طريقة قوية لإنشاء قيم مشتقة ديناميكيًا بناءً على البيانات التفاعلية؛ يتم استخدام computed لتعريف الخصائص التي تعتمد على بيانات أخرى، حيث يتم حسابها تلقائيًا عند حدوث أي تغيير في البيانات المرتبطة بها.

المميز في computed هو أنها تعتمد على التخزين المؤقت (caching)، مما يعني أنها تُعاد حسابها فقط عند الحاجة، أي عند تغير البيانات التي تعتمد عليها، مما يضمن تحسين الأداء.

وهي تُستخدم بشكل شائع لتبسيط العمليات المعقدة داخل القالب (template) وجعل الكود أكثر وضوحًا وتنظيماً.

الأداة watch : تُستخدم لمراقبة التغيرات التي تحدث على القيم التفاعلية أو الخصائص المحسوبة (computed properties) وتنفيذ إجراءات معينة بناءً على تلك التغيرات.

تُعد watch مفيدة في الحالات التي تحتاج فيها إلى التعامل مع تأثيرات جانبية (side effects)، مثل استدعاء API عند تغيير قيمة معينة، أو تحديث بيانات أخرى بناءً على تغير في المدخلات.

يمكن تخصيصها لمراقبة قيم فردية أو كائنات كاملة، مما يجعلها أداة مرنة لإدارة التفاعلات المعقدة في التطبيقات، وأيضا باستخدام watch، يمكنك كتابة كود أكثر تنظيماً واستجابةً لاحتياجات التطبيق.

مثال عملي

<template>
  <div>
    <h1>Counter App</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increase</button>
    <button @click="decrement">Decrease</button>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue';

// Using ref to create a simple reactive variable
const count = ref(0);

// Using reactive to create a reactive object with multiple properties
const state = reactive({
  threshold: 5,
  warning: '',
});

// Using computed to create a value derived from reactive state
const message = computed(() => {
  return count.value > state.threshold
    ? 'Count is above the threshold!'
    : 'Count is within the safe range.';
});

// Using watch to monitor changes in the count variable
watch(count, (newCount, oldCount) => {
  if (newCount > 10) {
    state.warning = 'Warning: Count is too high!';
  } else {
    state.warning = '';
  }
});

// Functions to increment and decrement the counter
const increment = () => {
  count.value++;
};

const decrement = () => {
  count.value--;
};
</script>

الكود السابق يوضح تطبيقًا بسيطًا باستخدام Vue 3 لعدّاد يتفاعل مع تغييرات البيانات بشكل تلقائي، إليك شرح المكونات الأساسية في الكود.

تم استخدام ref لإنشاء المتغير count الذي يمثل قيمة العدّاد؛ هذا المتغير تفاعلي، مما يعني أن أي تغيير في قيمته يتم تحديثه مباشرة على واجهة المستخدم.

على سبيل المثال، عند زيادة أو تقليل العدّاد، تتغير القيمة المعروضة على الشاشة تلقائيًا.

تم استخدام reactive لإنشاء الكائن state الذي يحتوي على خصائص متعددة مثل threshold (الحد الأقصى للقيمة الآمنة) و warning (رسالة التحذير).

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

خاصية message تم إنشاؤها باستخدام computed، وهي تعتمد على قيمة count و threshold.

تقوم هذه الخاصية بحساب الرسالة المناسبة تلقائيًا؛ إذا كانت قيمة العدّاد أكبر من الحد المسموح، تعرض الرسالة "Count is above the threshold!"، وإذا كانت ضمن الحدود الآمنة، تعرض رسالة مختلفة.

هذه الخاصية يتم تحديثها تلقائيًا عند تغيير القيم التي تعتمد عليها.

تم استخدام watch لمراقبة تغيرات قيمة count؛ عند تجاوز قيمة العدّاد الرقم 10، يقوم المراقب بتحديث خاصية warning داخل الكائن state برسالة تحذير "Warning: Count is too high!"، وإذا عادت القيمة إلى أقل من 10، يتم ازالة الرسالة.

هذه الأداة مفيدة لإجراء تغييرات إضافية بناءً على تحديث القيم.

تم إنشاء دالتين هما increment و decrement لزيادة أو تقليل قيمة العدّاد.

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

عندما يتم الضغط على زر "Increase" أو "Decrease"، يتم تحديث قيمة العدّاد في واجهة المستخدم، يتم عرض رسالة بناءً على حالة العدّاد (داخل أو خارج الحدود الآمنة).

وإذا تجاوز العدّاد القيمة 10، تظهر رسالة تحذيرية ديناميكيًا.

أفضل الممارسات ونصائح حول تحسين الأداء

إن تحسين الأداء في Vue لا يعتمد فقط على كتابة كود نظيف، بل أيضًا على فهم كيفية عمل نظام التفاعلية وتجنب العمليات الزائدة عن الحاجة، وفيما يلي مجموعة من أفضل الممارسات لتحسين الأداء :

استخدام computed بحكمة عند الحاجة إلى خصائص تعتمد على بيانات أخرى، استخدم computed بدلاً من تنفيذ العمليات الحسابية مباشرة داخل القالب (template).

تجنب الاستخدام المفرط لـ watch فرغم أنها أداة مفيدة لمراقبة التغيرات وتنفيذ التأثيرات الجانبية، إلا أن استخدامها بشكل مفرط قد يؤدي إلى تعقيد غير ضروري.

تقليل إعادة التفاعل (Reactivity Overhead) بحيث لا تجعل كل البيانات تفاعلية إذا لم تكن بحاجة إلى ذلك. على سبيل المثال، استخدم متغيرات عادية أو غير تفاعلية (non-reactive) للبيانات التي لا تؤثر على العرض.

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

الخاتمة

التفاعلية هي جوهر Vue، حيث تتيح للمطورين بناء تطبيقات عالية التفاعل وسريعة الاستجابة. من خلال فهم تفاصيل التعامل مع المتغيرات التفاعلية وكيفية معالجة فقدان التفاعلية، يمكنك استغلال القوة الكاملة لإطار العمل Vue في مشاريعك.

وفقنى الله وإياك إلى ما يحبه ويرضاه ،،