إليك ترجمة مجانية للمقال " 10 تلميحات وحيل لجعلك مطورًا أفضل لبرنامج VueJS " من Dev.to. سيخبرنا المؤلف عن خيارات مثيرة للاهتمام ومفيدة لاستخدام أدوات VueJS المعتادة.
مقدمة
أستمتع حقًا بالعمل مع VueJS وفي كل مرة أقوم فيها بذلك ، أغوص بشكل أعمق في قدراتها وميزاتها. في هذه المقالة ، أقدم لكم 10 نصائح وحيلًا رائعة ربما لم تكن على دراية بها وسوف نحاول مساعدتك في أن تصبح أفضل مطور على VueJS.
دعونا نجعل بناء فتحات جميلة
مع إصدار Vue 2.6 ، أصبحت اختصارات الشرائح متاحة ، والتي يمكن استخدامها كأحداث (على سبيل المثال ، اختصار @click لـ v-on:click ) أو نقطتين لربط البيانات ( :src ). إذا كان لديك على سبيل المثال مكون جدول ، فيمكنك استخدام الميزة التالية:
<template> ... <my-table> <template #row="{ item }"> /* some content here. You can freely use 'item' here */ </template> </my-table> ... </template>
$ on ('خطاف:')
هذه ميزة رائعة يمكنك استخدامها إذا كنت بحاجة إلى تحديد مستمع أحداث مخصص أو مكون إضافي تابع لجهة خارجية في الخطافات mounted created أو mounted وتحتاج إلى إزالته في خطاف beforeDestroy لمنع تسرب الذاكرة. باستخدام $on('hook:') يمكنك تحديد أو إزالة حدث في خطاف واحد فقط.
mounted() { const aThirdPartyPlugin = aThirdPartyPlugin() this.$on('hook:beforeDestroy', () => { aThirdPartyPlugin.destroy() }) }
الدعائم التحقق من الصحة
ربما تعلم بالفعل أنه من الممكن التحقق من صحة الدعائم الخاصة بك مع القيم البدائية ، مثل String أو Number أو Object . ولكن يمكنك أيضًا إنشاء أداة تحقق مخصصة ، على سبيل المثال للتحقق من مجموعة من السلاسل:
alertType: { validator: value => ['signup', 'login', 'logout'].includes(value) }
وسائط التوجيه الديناميكية
واحدة من أروع ميزات برنامج VueJS 2.6 هي القدرة على تحديد وسائط توجيه المكونات ديناميكيًا. افترض أن لديك مكون زر وترغب في الاستماع إلى حدث Click ظل ظروف معينة وحدث DoubleClick في جميع الحالات الأخرى. في هذه الحالة ، قد يكون هذا التوجيه مفيدًا:
<template> ... <aButton @[someEvent]="handleSomeEvent()"/> ... </template> <script> ... data(){ return{ ... someEvent: someCondition ? "click" : "dblclick" } }, methods:{ handleSomeEvent(){ // handle some event } } ... </script>
والأمر الرائع حقًا -> هذا أنه يمكنك تطبيق هذا القالب على سمات HTML الديناميكية والدعائم والمزيد!
إعادة استخدام المكونات لطرق مماثلة
في بعض الأحيان يكون لديك طرق مختلفة تستخدم مجموعة من المكونات. إذا قمت بالتبديل بين هذه المسارات ، فلن يتم إعادة رسم المكون المشترك افتراضيًا ، لأن Vue ستعيد استخدام هذا المكون للحصول على أداء أفضل. لكن إذا كنت ترغب في إعادة رسم هذه المكونات ، يمكنك تحديد :key خاصية :key في Router-View-Component :
<template> <router-view :key="$route.fullPath"></router-view> </template>
تمرير جميع الدعائم من الأصل إلى المكون الفرعي
هذه ميزة رائعة حقًا لتمرير جميع الدعائم من المكون الأصلي إلى المكون الفرعي. هذه الطريقة ملائمة إذا كنت تستخدم مكون المجمع على سبيل المثال. وبالتالي ، بدلاً من تمرير كل الخصائص بالتسلسل ، تحتاج فقط إلى تمريرها جميعًا مرة واحدة:
<template> <childComponent v-bind="$props"/> </template>
بدلا من ذلك:
<template> <childComponent :prop1="prop1" :prop2="prop2" :prop3="prop3" :prop4="prop4" ... /> </template>
تمرير جميع المستمعين الحدث من الأم إلى المكون الفرعي
إذا كان لديك مكون فرعي ليس الجذر للمكون الأصل ، فيمكنك نقل جميع مستمعي الأحداث من الأب إلى الطفل مثل هذا:
<template> <div> ... <childComponent v-on="$listeners"/> ... </div> </template>
إذا كان المكون الفرعي هو أصل الأصل ، فلن تحتاج إلى مثل هذه الخدعة وستكون جميع الأحداث متاحة افتراضيًا.
$ createElement
كل مثيل Vue لديه حق الوصول بشكل افتراضي إلى $createElement ، التي تنشئ وترجع العقد الافتراضية. يمكن استخدام هذا ، على سبيل المثال ، لاستخدام الترميز في الطرق التي يمكن تمريرها إلى توجيه v-html . في المكونات الوظيفية ، تتوفر هذه الطريقة كوسيطة أولى لوظيفة render .
باستخدام JSX
بدءًا من Vue CLI 3 ، ظهر دعم JSX افتراضيًا. يمكنك الآن كتابة التعليمات البرمجية باستخدام JSX (على سبيل المثال ، إذا كنت أكثر راحة بعد رد الفعل) ، فقد يكون ذلك أيضًا أكثر ملاءمة ، على سبيل المثال ، لكتابة المكونات الوظيفية. إذا لم تكن تستخدم Vue CLI 3 بالفعل ، فيمكنك استخدام babel-plugin-transform-vue-jsx لدعم babel-plugin-transform-vue-jsx في مشروعك.
مخصص الخامس نموذج
بشكل افتراضي ، v-model هو ما نسميه السكر النحوي على @input و :value أحداث :value . ولكن يمكنك تحديد خاصية model في مكون Vue الخاص بك وتحديد الحدث والدعائم التي سيتم استخدامها:
export default: { model: { event: 'change', prop: 'checked' } }
استنتاج
آمل أن أتمكن من تقديم بعض النصائح لمساعدتك في أن تصبح أفضل مطور لبرنامج VueJS.