تحسين تطبيق Vue.js. بعض النصائح العملية

   (( item.name ))
 
 

...وسنرى خطأ من هذا القبيل :

يمكننا التعامل معها من خلال باستخدام JSX ومكون وظيفي، كما يجب أن نمرر قيمة منطقية وستحل محل v-إذا.

لا تكتب معالجات استدعاء واجهة برمجة التطبيقات في المكونات

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

مثال على ذلك:

بدلاً من طريقة مثل هذه

تم إنشاؤه() (
هذا.fetchArticles();
<),
الطرق: (
 مزامنة جلب المقالات () (
  جرّب (
    const data = await axios.get(url);
    this.articles = data.articles;
    ) التقاط (e) (
    // معالجة الخطأ
    )
  )
)

اكتب شيئًا كهذا - فقط قم باستدعاء الأسلوب المناسب الذي سيعيد نتائج واجهة برمجة التطبيقات:

aync fetchArticles() (
   حاول (
     this.articles = await ArticlesService.fetchAll();
   ) إمساك (e) (
     // معالجة الخطأ
   )
  )

استخدم فتحات بدلاً من كميات كبيرة من الدعائم

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

(( نص ))

في هذه المرحلة، إنه مكون بسيط يقبل دعامة نصية فقط. حسنًا، ولكن قد لا يكون ذلك كافيًا لأننا سنحتاج إلى أيقونات في الزر. في هذه الحالة، علينا إضافة خاصيتين أخريين (2، لأننا نريد أن يكون لدينا خيار الإضافة قبل النص أو بعده). إذًا، سيبدو المكوّن هكذا:

(( نص ))

الأمر ليس سيئاً، لدينا 3 دعائم فقط، ولكن...

ماذا لو احتجنا إلى مؤشر تحميل؟ حسنًا، سيتعين علينا إضافة دعامة أخرى. وذلك لكل ميزة جديدة! هل تبدو مواكبة نمو عدد المكونات أمرًا صعبًا الآن؟ نعم، يبدو كذلك بالتأكيد!

لنستخدم الفتحات بدلاً من ذلك.

أبسط، أليس كذلك؟ حسناً، ولكن كيف يمكننا الحصول على ميزة إضافة أيقونة؟ الأمر سهل للغاية! فقط استخدم المكوّن هكذا:

رجوع

التالي

طريقة سهلة لتحسين الأداء

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

مسارات التحميل البطيء

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

فقط استخدم دالة السهم في خاصية المكون الخاص بك لإرجاع دالة الاستيراد:

تصدير افتراضي VueRouter جديد VueRouter (
   (
     الوضع: 'تاريخ',
     المسارات: [
       (
         المسار: '/الهبوط',
         المكوّن: () => استيراد ('.../الصفحات/صفحات/مرحبًا'),
         الاسم: 'ترحيب'
       ),
  ...

بدلاً من:

استيراد PW مرحبًا من '@/pages/p-welcome';

تصدير افتراضي VueRouter جديد VueRouter (
(
الوضع: 'تاريخ',
المسارات: [
(
المسار: '/الهبوط',
مكون: PW welcome, //مكون مستورد فقط
الاسم: 'ترحيب'
),

تحميل كسول لمكونات Vue

قد يحدث وضع مماثل مع مكونات 1TP5555T. يمكننا استيراد مكوّنات ملف واحد هكذا بتكاسل:

المكون الكسول = () => استيراد ('pathToComponent.vue')
تصدير افتراضي (
المكوّنات: (lazyComponent )
)

// صيغة أخرى
تصدير افتراضي (
مكونات: (
المكوّن الكسول: () => استيراد ('pathToComponent.vue')
)
)

بفضل التحميل البطيء لذلك المكون، سيتم تنزيله فقط عند طلبه. على سبيل المثال، إن كان لدينا مكوّن بـ v-إذا، سيُطلب فقط في حال كان المكوّن للتصيير. لذا إن لم تكن قيمة v-إذا صحيحة، فلن يُحمَّل المكون. لهذا السبب يمكن أيضًا استخدام الاستيراد البطيء لـ JavaScript الملفات.

المكافأة: عند استخدام Vue CLI 3+، يتم التحميل المسبق لكل مورد تم تحميله بشكل كسول بشكل افتراضي!

استخدم أغلفة شفافة بدلاً من دعائم السمات

فكر في مكون مثل هذا المكون:

بدون أي مشاكل، يمكننا استخدامه على هذا النحو:

أو

إنه يعمل، لأن Vue يسمح لك بتمرير سمات html إلى المكوّن حتى لو لم تُصرّحها كخاصيّات. تُطبَّق سمات html على العنصر الجذر للمُكوِّن (الإدخال في هذه الحالة).

تظهر المشكلة عندما نريد توسيع مكوّن الإدخال الخاص بنا، حيث يمكن أن يبدو هكذا:

<code> <template>
   <div class="form-group">
     <label :for="id">(( التسمية ))</label>
     <input
       :id="id"
       :value="value"
       class="base-input"
       @input="$emit('input', $event.target.value)"
     >
   </div>
 </template>

والآن، باستخدام المكوّن بهذه الطريقة

لن يعمل كما نريد، لأنه سيتم تطبيق النوع والعنصر النائب على div (العنصر الجذر) وهذا غير منطقي. لذا، نحن بحاجة إلى التعامل مع ذلك، لأننا نريد إضافة خصائصنا إلى عنصر الإدخال. قد تكون فكرتك الأولى هي "دعنا نضيف السمات التي نحتاجها!" وبالطبع سينجح ذلك، ولكن... ماذا لو أردنا استخدام النوع, الإكمال التلقائي, العنصر النائب, ضبط تلقائي للصورة, معطل, وضع الإدخالإلخ، إذن علينا تعريف الخاصيات لكل سمة من سمات html. أنا شخصيًا لا أحب هذه الطريقة الطويلة، لذا دعنا نبحث عن شيء أفضل!

يمكننا التعامل مع المشكلة برمتها في سطرين فقط

<template>
  <div class="form-group">
    <label :for="id">(( التسمية ))</label>
    <!-- pay attention to v-bind="$attrs" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false, // <- pay attention to this line
  props: ['value', 'label', 'id']
);
</script>

يمكننا استخدام v-bind="$attrs" وتمرير السمات مباشرةً إلى دون الإعلان عن كميات ضخمة من الدعائم. تذكر أيضًا بشأن إضافة خيار الوراثة: خطأ لتعطيل تمرير السمات إلى العنصر الجذر. لنذهب أبعد من ذلك قليلًا: ماذا لو احتجنا إلى إضافة مستمعي الأحداث إلى هذا الإدخال؟ مرة أخرى، يمكن التعامل معها عن طريق الخاصيات أو الأحداث المخصصة، ولكن هناك حل أفضل.

<template>
  <div class="form-group">
    <label :for="id">(( التسمية ))</label>
    <!-- pay attention to v-on="listeners" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      v-on="listeners"
    >
</div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false,
  props: ['value', 'label', 'id'],
  computed: (
    listeners() (
      return (
        ...this.$listeners,
        input: event => this.$emit('input', event.target.value)
      );
    )
  )
);
</script>

هناك خاصية محسوبة جديدة تُعيد المكوّن للمستمعين وتضيف مستمع الإدخال. نستخدم ذلك الإدخال المحسوب ببساطة عن طريق كتابة v-on="مستمعون".

استخدم المراقب مع الخيار الفوري بدلاً من الخطاف والمراقب المُنشأ معًا

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

تصدير افتراضي (
  الاسم: 'مكون ما',
  مشاهدة: (
    SomeWatchedProperty() (
      هذا.fetchData();
    )
  ),
  تم إنشاؤها() (
    هذا.fetchData();
  ),
  الطرق: (
    fetchData() (
      ) // التعامل مع بيانات الجلب
    )
  )
);

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

تصدير افتراضي (
الاسم: 'مكون ما',
مشاهدة: (
  someWatchedProperty: 'fetchData'
),
  تم إنشاؤه() (
    هذا.fetchData();
  ),
  الطرق: (
    fetchData() (
      ) // التعامل مع بيانات الجلب
    )
  )
);

الإصدار أعلاه أفضل لأنّه ليس من الضروري وجود طريقة أخرى، لقد قمنا فقط بتسمية طريقة يجب استدعاؤها لتغيير خاصية المشاهدة.

نهج أفضل:

تصدير افتراضي (
    الاسم: 'مكون ما',
    مشاهدة: (
      SomeWatchedProperty: (
        المعالج: 'fetchData',
        فوري: صحيح
      )
    ),
    الطرق: (
      fetchData() (
        // التعامل مع بيانات الجلب
      )
    )
  );

تخلصنا من خطاف الإنشاء. بإضافة الخيار "فوري"، نجعل هذا المكوّن يستدعي طريقة جلب البيانات مباشرةً بعد بداية الملاحظة (أي قبل خطاف الإنشاء بقليل وبعد ما قبل الإنشاء)، لذا يمكن استخدامه بدلًا من خطاف الإنشاء.

ملخص تلميحات Vue.js

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

لاحظ أنه تم تبسيط بعضها لأغراض المقالة.

اقرأ المزيد:

JavaScript ميت تمامًا. شخص ما على الإنترنت

نظرة أعمق على أكثر خطافات React شيوعًا

مشاريع البرامج التي يمكنك استخدام JavaScript فيها