المرشحات والمخاليط في Vue.js

المرشحات Filters والـمخاليط Mixins في Vue.js: شرح شامل ومفصل

تعتبر مكتبة Vue.js واحدة من أشهر وأقوى مكتبات JavaScript في تطوير واجهات المستخدم التفاعلية، لما توفره من أدوات مرنة تسهل على المطورين كتابة أكواد نظيفة وقابلة لإعادة الاستخدام. من بين هذه الأدوات نجد “المرشحات” (Filters) و”المخاليط” (Mixins)، وهما مفهومان مهمان للغاية لكل مطور يعمل على مشاريع Vue.js ويريد تعزيز جودة وكفاءة تطبيقاته.

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

أولاً: المرشحات (Filters) في Vue.js

تعريف المرشحات

المرشحات في Vue.js هي دوال (Functions) بسيطة تستخدم لتحويل أو تعديل النصوص أو البيانات المعروضة في القوالب (Templates) قبل عرضها للمستخدم. يمكن اعتبارها بمثابة أنابيب (Pipes) لتحويل البيانات، حيث يمكن تطبيقها على النصوص أو الأرقام لتنسيقها بشكل معين، مثل تحويل النص إلى أحرف كبيرة، أو تنسيق التاريخ، أو إضافة عملة، أو اختصار النص.

كيف تعمل المرشحات؟

تُستخدم المرشحات في Vue.js داخل القوالب عن طريق رمز الأنابيب |، حيث توضع بعد القيمة التي نريد تنسيقها أو تعديلها. على سبيل المثال، إذا أردنا تحويل نص إلى أحرف كبيرة:

vue
CopyEdit
{{ message | uppercase }}

وهنا يفترض أن تكون هناك دالة فلتر اسمها uppercase تقوم بتحويل النص إلى أحرف كبيرة.

تعريف المرشحات داخل Vue

يمكن تعريف المرشحات إما على مستوى التطبيق بالكامل، أو على مستوى المكون (Component) فقط.

• تعريف فلتر عام (Globally):

javascript
CopyEdit
Vue.filter('uppercase', function(value) {
  if (!value) return ''
  return value.toString().toUpperCase()
})

• تعريف فلتر محلي (Locally داخل مكون):

javascript
CopyEdit
export default {
  filters: {
    uppercase(value) {
      if (!value) return ''
      return value.toString().toUpperCase()
    }
  }
}

أنواع الاستخدامات الشائعة للمرشحات

1. تنسيق النصوص: مثل تحويل النص إلى أحرف كبيرة، أو أحرف صغيرة، أو رأسية الكلمات.

2. تنسيق الأرقام: عرض الأرقام بصيغ معينة كالفاصلة العشرية، أو إضافة عملة، أو التنسيق مع الفاصلة.

3. تنسيق التواريخ: تحويل الطابع الزمني (Timestamp) إلى صيغة تاريخ واضحة.

4. قص النصوص الطويلة: لاختصار النصوص الطويلة بشكل جذاب.

مثال عملي على فلتر تنسيق التاريخ

javascript
CopyEdit
Vue.filter('formatDate', function(value) {
  if (!value) return ''
  const date = new Date(value)
  return date.toLocaleDateString('ar-EG', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
})

في القالب:

vue
CopyEdit
{{ user.createdAt | formatDate }}

هذا المثال يحول تاريخ إنشاء المستخدم إلى صيغة عربية واضحة وجميلة.

ملاحظات هامة حول المرشحات

• المرشحات لا تدعم في Vue 3 بشكل رسمي: مع إطلاق Vue 3 تم حذف دعم المرشحات من القوالب بشكل رسمي، ويُفضل استبدالها بالطرق البديلة مثل استخدام الدوال داخل الـ computed properties أو methods. لكنها لا تزال موجودة في Vue 2 بشكل واسع.

• المرشحات لا تؤثر على البيانات نفسها، بل فقط على العرض، أي أن البيانات الأصلية تظل كما هي.

• يمكن ربط عدة مرشحات معاً عبر استخدام سلسلة الأنابيب، مثل:

vue
CopyEdit
{{ message | uppercase | truncate(10) }}

ثانياً: المخاليط (Mixins) في Vue.js

تعريف المخاليط

المخاليط أو Mixins في Vue.js هي طريقة لإعادة استخدام كود (وظائف، بيانات، سلوكيات) مشتركة بين عدة مكونات. يسمح الميكسن للمطورين بتجميع مجموعة من الخصائص (Properties) والدوال التي يمكن دمجها مع أي مكون بسهولة. يعتبر الميكسن نمط تصميم برمجي يعزز من قابلية إعادة الاستخدام والتنظيم في المشاريع الكبيرة.

كيفية عمل Mixins

يمكنك تعريف mixin على شكل كائن يحتوي على خصائص data و methods و computed وأي شيء يمكن أن يتواجد في مكون Vue. عند دمج mixin مع مكون ما، يتم دمج كل الخصائص والدوال الموجودة في الميكسن مع خصائص المكون.

تعريف mixin عالمي

javascript
CopyEdit
Vue.mixin({
  data() {
    return {
      sharedMessage: 'هذه رسالة مشتركة'
    }
  },
  methods: {
    greet() {
      console.log('مرحبا من الميكسن')
    }
  }
})

تعريف mixin محلي واستخدامه في مكون

javascript
CopyEdit
const myMixin = {
  data() {
    return {
      mixinData: 'بيانات من الميكسن'
    }
  },
  methods: {
    showMixinData() {
      alert(this.mixinData)
    }
  }
}

export default {
  mixins: [myMixin],
  mounted() {
    this.showMixinData()
  }
}

دمج خصائص mixin مع مكون

• عند وجود خصائص متشابهة في الميكسن والمكون، يتم الدمج بطريقة معينة:

  • البيانات data: تدمج معًا، ولكن إذا كان هناك تعارض في الاسم يتم إعطاء أولوية لبيانات المكون.

  • الدوال methods: في حالة وجود دوال بنفس الاسم، يتم استبدال دالة الميكسن بدالة المكون (الأولوية للمكون).

  • دوال lifecycle مثل created أو mounted: يتم استدعاؤها جميعًا، حيث تُنفذ دوال الميكسن ثم دوال المكون.

فوائد استخدام Mixins

1. إعادة استخدام الكود: توفير وظائف مشتركة بين مكونات مختلفة.

2. تقليل تكرار الكود: تجميع الوظائف المتكررة في مكان واحد.

3. تنظيم الكود بشكل أفضل: فصل المنطق المشترك عن مكونات العرض.

4. سهولة الصيانة: تعديل الميكسن يؤثر على كل المكونات التي تستخدمه.

حالات استخدام Mixins

• التعامل مع التحقق من صلاحية المستخدم في عدة مكونات.

• تكرار منطق التعامل مع API معين.

• وظائف تنسيق وتحويل البيانات المشتركة.

• أي سلوك أو حالة مشتركة بين مكونات متعددة.

الفروق الجوهرية بين المرشحات (Filters) والمخاليط (Mixins)

استبدال المرشحات في Vue 3

مع وصول Vue 3، تم التخلي عن المرشحات في القوالب، وتم التوجه إلى استخدام:

• الـ computed properties: لإنشاء خصائص محسوبة تقوم بتحويل أو تعديل البيانات.

• الدوال داخل methods: يمكن استدعاؤها داخل القوالب أو في داخل الـ template expression.

• المكونات الفرعية: لتغليف تحويلات معقدة.

مثال بديل للفلتر في Vue 3 باستخدام computed property

javascript
CopyEdit
export default {
  data() {
    return {
      message: 'مرحبا بالعالم'
    }
  },
  computed: {
    uppercaseMessage() {
      return this.message.toUpperCase()
    }
  }
}

وفي القالب:

vue
CopyEdit
{{ uppercaseMessage }}

حالات عملية لاستخدام المرشحات والمخاليط في مشاريع Vue.js

حالة استخدام مرشحات

• تنسيق التواريخ في صفحات عرض المقالات.

• عرض أسعار المنتجات مع إضافة علامة العملة.

• قص نصوص العناوين الطويلة في قوائم الأخبار.

حالة استخدام mixins

• مكون يقوم بالتعامل مع التحقق من تسجيل الدخول وتشارك هذا السلوك عبر أكثر من مكون.

• التعامل مع تحميل البيانات من API وإدارتها.

• إدارة التنقل بين الصفحات مع حفظ الحالة المشتركة.

نصائح وممارسات مثالية عند استخدام المرشحات والمخاليط

• تجنب الإفراط في استخدام Mixins: قد يؤدي الاستخدام المكثف إلى تعقيد الكود وصعوبة التتبع، خصوصاً مع التعارضات المحتملة. استخدمها بحكمة.

• تنظيم Mixins: ضع كل mixin في ملف منفصل مع تسمية واضحة توضح وظيفته.

• الاستعاضة عن Mixins بـ Composition API (في Vue 3): لتعزيز إعادة استخدام الكود بشكل أفضل وأوضح.

• لا تستخدم المرشحات لتحويلات معقدة: استخدم computed أو methods، لأن المرشحات يجب أن تبقى بسيطة وقصيرة.

• كتابة المرشحات والمخاليط بطريقة خالية من الأخطاء: تأكد من التعامل مع القيم غير المعرفة أو الفارغة داخل المرشحات.

• توثيق Mixins جيداً: خصوصاً عندما تحتوي على دوال هامة أو حالة تؤثر على سلوك المكونات.

جدول مقارنة تفصيلي للميزات والاختلافات بين Filters و Mixins

خاتمة

يُعد كل من المرشحات والمخاليط في Vue.js أدوات قوية تعزز من جودة التطبيقات ومرونتها. المرشحات توفر طريقة بسيطة وفعالة لتنسيق العرض داخل القوالب، في حين أن المخاليط تتيح مشاركة المنطق والبيانات بين المكونات المختلفة بطريقة سهلة ومنظمة.

مع التطور الكبير الذي شهدته Vue.js وخاصة مع إصدار Vue 3، تغيرت الكثير من المفاهيم المتعلقة باستخدام هذه الأدوات، مما يحتم على المطورين التكيف مع التقنيات الجديدة كـ Composition API، واستخدام الدوال والخصائص المحسوبة عوضاً عن المرشحات.

فهم عميق لكيفية عمل المرشحات والمخاليط وأفضل طرق استخدامها يساهم بشكل كبير في بناء تطبيقات Vue.js أكثر نظافة، قابلية للصيانة، وأداءً أفضل.

المراجع

• الرسمية: Vue.js Guide – Filters

• الرسمية: Vue.js Guide – Mixins