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

تعرف على كيفية استخدام Vue Computed Properties لتخزين العمليات الحسابية في ذاكرة التخزين المؤقت


ما هي الممتلكات المحسوبة

في Vue.js يمكنك إخراج أي قيمة بيانات باستخدام الأقواس:

<template>
  <p>{{ count }}</p>
</template>

<script> export default { data() { return { count: 1 } } } </script>

يمكن أن تستضيف هذه الخاصية بعض الحسابات الصغيرة ، على سبيل المثال

<template>
  {{ count * 10 }}
</template>

لكنك مقيد بجافا سكريبت واحدالتعبير.

بالإضافة إلى هذا القيد الفني ، تحتاج أيضًا إلى مراعاة أن النماذج يجب أن تهتم فقط بعرض البيانات للمستخدم ، وليس إجراء الحسابات المنطقية.

للقيام بشيء أكثر ، يجب استخدام تعبير واحد ، وللحصول على المزيد من القوالب التعريفية ، يمكنك استخدام ملفخاصية محسوبة.

يتم تعريف الخصائص المحسوبة فيcomputedخاصية مكون Vue:

<script>
export default {
  computed: {

} } </script>

مثال على خاصية محسوبة

فيما يلي مثال على رمز يستخدم خاصية محسوبةcountلحساب الناتج. يلاحظ:

  1. لم يكن علي الاتصالcount(). يستدعي Vue.js الوظيفة تلقائيًا
  2. لقد استخدمت وظيفة عادية (ليست وظيفة سهم) لتحديد ملفcountمحسوبة لأنني بحاجة إلى أن أكون قادرًا على الوصول إلى مثيل المكون من خلالthis.

    <template>
    <p>{{ count }}</p>
    </template>
    

    <script> export default { data() { return { items: [1, 2, 3] } }, computed: { count: function() { return 'The count is ’ + this.items.length * 10 } } } </script>

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

إذا كنت تعرف بالفعلطرق Vue، قد تتساءل ما هو الفرق.

أولاً ، يجب استدعاء الطرق ، وليس الرجوع إليها فقط ، لذلك ستحتاج إلى إجراء مكالمةcount()بدلا منcountاذا كان لديكcountطريقة:

<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    }
  },
  methods: {
    count: function() {
      return 'The count is ' + this.items.length * 10
    }
  }
}
</script>

لكن الاختلاف الرئيسي هو ذلكيتم تخزين الخصائص المحسوبة مؤقتًا.

نتيجةcountيتم تخزين الخاصية المحسوبة داخليًا مؤقتًا حتىitemsتغييرات خصائص البيانات.

هام: الخصائص المحسوبة هييتم تحديثه فقط عند تحديث مصدر تفاعلي. طرق JavaScript العادية ليست تفاعلية ، لذلك من الأمثلة الشائعة استخدامهاDate.now():

<template>
  <p>{{ now }}</p>
</template>

<script> export default { computed: { now: function () { return Date.now() } } } </script>

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

في هذه الحالة ، تكون الطريقة أكثر ملاءمة لاحتياجاتك.

تحميل مجانيكتيب Vue


المزيد من دروس vue: