Vue ، لماذا يجب أن تكون البيانات دالة

باستخدام Vue ، قد تسأل نفسك بالتأكيد السؤال "لماذا يجب أن تكون البيانات دالة تقوم بإرجاع كائن ، وليس مجرد كائن؟"

باستخدام Vue ، قد تسأل نفسك بالتأكيد السؤال "لماذا يجبdataأن تكون دالة تقوم بإرجاع كائن وليس مجرد كائن؟ "

<template>
  <a v-on:click="counter = counter + 1">{{counter}}</a>
</template>
<script>
export default {
data: function() {
return {
counter: 0
}
}
}
</script>

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

التفسير هو أنه عند استخدام المكون عدة مرات ، إذا لم يكن وظيفة ، ولكنه كائن عادي ، مثل هذا:

data: {
  counter: 0
}

ثم بسبب طريقة عمل JavaScript ،كل مثيل واحد من المكون سيشارك هذه الخاصية.

هذا ليس ما تريده في 99.9٪ من الحالات ، وبدلاً من ذلك يجب عليك القيام بما يلي:

data: function() {
  return {
    counter: 0
  }
}

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

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

Vue ، لماذا يجب أن تكون البيانات دالة

باستخدام Vue ، قد تسأل نفسك بالتأكيد السؤال "لماذا يجب أن تكون البيانات دالة تقوم بإرجاع كائن ، وليس مجرد كائن؟"

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