دليل بسيط لخصائص Vue.js المحسوبة

توفر Vue.js ميزة قوية تسمى computed properties والتي تتيح لك إجراء الحسابات واستخلاص البيانات من حالة المكون الخاص بك. تعد الخصائص المحسوبة مفيدة بشكل خاص عندما تريد إجراء حسابات معقدة أو تحويلات بناءً على خصائص البيانات التفاعلية مع الحفاظ على كود القالب الخاص بك نظيفًا وقابلًا للقراءة.

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

ما هي الخصائص المحسوبة؟

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

فيما يلي مثال أساسي لمكون Vue باستخدام خاصية محسوبة:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

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

الخصائص المحسوبة مقابل الطرق

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

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

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

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

يمكن أن تحتوي الخصائص المحسوبة أيضًا على getters وsetters. بشكل افتراضي، تحتوي الخصائص المحسوبة على getter فقط، ولكن يمكنك إضافة setter للتعامل مع تحديثات البيانات.

فيما يلي مثال لخاصية محسوبة تحتوي على كل من getter وsetter:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <input v-model="fullName" placeholder="Enter your full name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};
</script>

في هذا المثال، تحتوي الخاصية المحسوبة fullName على مُستقبل يعيد الاسم الكامل ومُعيِّن يقسم الاسم المُدخل ويقوم بتحديث خصائص البيانات firstName وlastName.

التفاعلية في الخصائص المحسوبة

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

فيما يلي مثال يوضح هذه التفاعلية:

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <button @click="firstName = 'Jane'">Change First Name to Jane</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

في هذا المثال، عند النقر فوق الزر، يتم تغيير firstName إلى "Jane"، ويتم تحديث الخاصية المحسوبة fullName تلقائيًا إلى "Jane Doe".

أفضل الممارسات لاستخدام الخصائص المحسوبة

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

خاتمة

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

محسوب خصائص vue تفاعلي getter setter ذاكرة تخزين مؤقتة أداء بيانات طرق مثال دليل تحديث فعّال