باستخدام 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.js
- واجهة سطر الأوامر Vue.js: تعرف على كيفية استخدامها
- أداة Vue.js DevTools
- تكوين VS Code لتطوير Vue
- أنشئ تطبيقك الأول باستخدام Vue.js
- مكونات الملف الفردي Vue.js
- قوالب Vue.js والاستيفاءات
- توجيهات Vue.js
- طرق Vue.js
- خصائص Vue.js المحسوبة
- تصميم مكونات Vue.js باستخدام CSS
- مراقبو Vue.js
- طرق Vue مقابل المراقبون مقابل الخصائص المحسوبة
- مرشحات Vue.js
- مكونات Vue.js
- فتحات Vue.js
- الدعائم المكون Vue.js
- أحداث Vue.js
- اتصالات مكونات Vue.js
- Vuex ، مدير ولاية Vue.js
- Vue ، استخدم مكونًا داخل مكون آخر
- Vue ، كيفية استخدام الخاصية كاسم للفئة
- كيفية استخدام SCSS مع Vue.js Single File Components
- استخدام Tailwind مع Vue.js
- جهاز التوجيه Vue
- إظهار مكون Vue ديناميكيًا
- ورقة الغش Vue.js
- قم بتخزين بيانات Vue على التخزين المحلي باستخدام Vuex
- كيفية تطبيق فئة ديناميكيًا باستخدام Vue
- كيفية استخدام Vue
- Vue ، لماذا يجب أن تكون البيانات دالة
- Roadmap to become a Vue.js developer in 2020