الأخطاء الشائعة التي يجب تجنبها أثناء العمل مع Vue.js

أبحث عن إطار عمل للواجهة الأمامية لتجربته ، بدأت باستخدام React ثم جربت Vue.js.

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

تضمين قالب مترجم

كانت مشكلتي الأولى مشكلة أساسية جدًا. أول شيء يجب فعله لاستخدام Vue.js هو استيراده. إذا اتبعت الدليل الرسمي واستخدمت نموذجًا مضمنًا للمكون الخاص بك ، فستحصل على صفحة فارغة.

import Vue from 'vue'; var vm = new Vue({ el: '#vm', template: ' Hello World ', });

لاحظ أن هذه المشكلة لا تحدث عند تحديد القوالب باستخدام وظيفة العرض أو SFC (مكون ملف فردي).

في الواقع ، هناك العديد من تصميمات Vue. الإصدار الافتراضي الذي تم تصديره بواسطة حزمة NPM هو إصدار وقت التشغيل فقط . لا يجلب مترجم القالب.

بالنسبة لبعض معلومات الخلفية ، يعمل مترجم القالب تمامًا مثل JSX لـ React. يستبدل سلاسل القوالب باستدعاءات الوظائف لإنشاء عقدة DOM افتراضية.

// #1: import full build in JavaScript file import Vue from 'vue/dist/vue.js'; // OR #2: make an alias in webpack configuration config.resolve: { alias: { vue: 'vue/dist/vue.js' } } // OR #3: use render function directly var vm = new Vue({ el: '#vm', render: function(createElement) { return createElement('div', 'Hello world'); } });

مع SFCs ، لا تحدث هذه المشكلة. كل من vue-loader و vueify هما أدوات مستخدمة للتعامل مع SFCs. يولدون مكونات جافا سكريبت عادية باستخدام وظيفة العرض لتعريف القالب.

لاستخدام قوالب السلسلة في المكونات ، استخدم بنية Vue.js كاملة.

باختصار ، لإصلاح هذه المشكلة ، حدد البنية الصحيحة أثناء الاستيراد ، أو أنشئ اسمًا مستعارًا لـ Vue في تكوين المجمّع.

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

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

حافظ على تفاعل الممتلكات

إذا كنت تستخدم React ، فمن المحتمل أنك تعلم أن تفاعلها يعتمد على استدعاء setStateالوظيفة لتحديث قيمة الخصائص.

التفاعلية مع Vue.js مختلفة قليلاً. يعتمد على إنشاء وكيل لخصائص المكون. سيتم تجاوز وظائف Getter و setter وسيتم إخطار التحديثات لـ Virtual DOM.

var vm = new Vue({ el: '#vm', template: ` {{ item.count }} `, data: { item: {} }, beforeMount () { this.$data.item.count = 0; }, methods: { updateCount () { // JavaScript object is updated but // the component template is not rendered again this.$data.item.count++; } } });

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

أثناء تهيئة عنصر، فيو يخلق وكيل تحت getو setظائف تعلق على itemالممتلكات. وبالتالي ، فإن الإطار سيراقب تغيرات القيمة ويتفاعل في النهاية.

ومع ذلك ، فإن countالخاصية ليست تفاعلية ، لأنه لم يتم الإعلان عنها في وقت التهيئة.

في الواقع ، لا يحدث الوكيل إلا في وقت تهيئة المكون ، ويتم beforeMountتشغيل وظيفة دورة الحياة لاحقًا.

إلى جانب ذلك ، itemلا يتم استدعاء الواضع أثناء countالتعريف. لذلك لن يتم تشغيل الوكيل ولن يكون countللملكية ساعة.

beforeMount () { // #1: Call parent setter // item setter is called so proxifying is propaged this.$data.item = { count: 0 }; // OR #2: explicitly ask for watching // item.count got its getter and setter proxyfied this.$set(this.$data.item, 'count', 0); // "Short-hand" for: Vue.set(this.$data.item, 'count', 0); }

إذا حافظت على item.countالتأثر beforeMount، Vue.setفلن يؤدي الاتصال لاحقًا إلى إنشاء ساعة.

تحدث نفس المشكلة أيضًا مع المصفوفات عند استخدام العاطفة المباشرة على فهارس غير معروفة. في مثل هذه الحالات ، يجب أن تفضل دوال مصفوفة ذات وكيل مثل pushو slice.

أيضًا ، يمكنك قراءة هذه المقالة من موقع Vue.js Developer.

كن حذرًا مع صادرات SFC

يمكنك استخدام Vue بانتظام في ملفات JavaScript ، ولكن يمكنك أيضًا استخدام مكونات الملف الفردي. يساعد في جمع كود JavaScript و HTML و CSS في ملف واحد.

مع SFCs ، رمز المكون هو علامة البرنامج النصي .vueلملف. لا يزال مكتوبًا في JavaScript ، يجب عليه تصدير المكون.

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

/* File: user.vue */ {{ user.name }} const User = { data: () => ({ user: { name: 'John Doe' } }) }; export User; // Not work export default User; // Works  /* File: app.js */ import {User} from 'user.vue'; // Not work import User from 'user.vue'; // Works (".vue" is required)

لا يتوافق استخدام عمليات التصدير المحددة مع ملفات SFC ، فكن على دراية بهذا الأمر!

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

لا تخلط مكونات SFC

يُعد وضع الكود والقالب والنمط معًا فكرة جيدة. إلى جانب ذلك ، بناءً على قيودك وآرائك ، قد ترغب في الفصل بين المخاوف.

كما هو موضح في وثائق Vue ، فهو متوافق مع SFC.

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

على سبيل المثال ، يمكن أن يكون للمكون وضع القراءة فقط والقراءة والكتابة والاحتفاظ بنفس التنفيذ.

/* File: user.js */ const User = { data: () => ({ user: { name: 'John Doe' } }) }; export default User; /* File: user-read-only.vue */ {{ user.name }} /* File: user-read-write.vue */  

في هذا المقتطف ، تستخدم قوالب القراءة فقط والقراءة والكتابة نفس مكون مستخدم JavaScript.

بمجرد استيراد كلا المكونين ، ستكتشف أنه لا يعمل كما هو متوقع.

// The last import wins import UserReadWrite from './user-read-write.vue'; import UserReadOnly from './user-read-only.vue'; Vue.component('UserReadOnly', UserReadOnly); Vue.component('UserReadWrite', UserReadWrite); // Renders two times a UserReadOnly var vm = new Vue({ el: '#vm', template: ` ` });

المكون المحدد فيuser.jsيمكن استخدامها فقط في SFC واحد. خلاف ذلك ، فإن آخر SFC تم استيراده والذي يستخدمه سيتجاوز السابق.

تسمح SFCs بتقسيم التعليمات البرمجية في ملفات منفصلة. لكن لا يمكنك استيراد هذه الملفات في مكونات Vue متعددة.

لتبسيط الأمر ، لا تعيد استخدام كود مكون JavaScript في مكونات SFC متعددة. ميزة الكود المنفصل هي بناء جملة مفيد ، وليست نمط تصميم.

شكرًا على القراءة ، أتمنى أن تكون تجربتي مفيدة لتجعلك تتجنب الأخطاء التي ارتكبتها.

إذا كانت مفيدة ، الرجاء الضغط على ؟ زر عدة مرات لجعل الآخرين يجدون المقالة ويظهرون دعمك! ؟

لا تنس متابعتي ليتم إخطاري بمقالاتي القادمة ؟

تحقق من مقالاتي الأخرى

➥ جافا سكريبت

  • كيف تحسن مهاراتك في JavaScript عن طريق كتابة إطار عمل تطوير الويب الخاص بك؟
  • توقف عن تصحيح أخطاء JavaScript المؤلمة واحتضن Intellij بخريطة المصدر

➥ رد فعل للمبتدئين سلسلة

  • ابدأ بالمقال الأول
  • احصل على دليل أفضل الممارسات