10 أشياء تحتاج لمعرفتها حول Vue.js Frontend Framework

مع الارتفاع المستمر لأطر عمل JavaScript للواجهة الأمامية ، بما في ذلك Vue.js 3 الجديدة ، أصبح من الضروري مواكبة هذه الأطر وفهم كل ما يتعلق بميزاتها الجديدة.

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

مستعد؟ لنذهب!

ما هو Vue.js؟

وفقًا لإيفان يو ، مبتكر Vue.js:

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

لقد أراد إنشاء إطار أمامي قوي مثل Angular ، ولكنه أيضًا “أخف وزنا” وأكثر مرونة بدون كل المكونات الإضافية والمفاهيم غير الضرورية التي تأتي مع Angular.

وكانت النتيجة Vue.js ، والتي تعد واحدة من أكثر أطر عمل الواجهة الأمامية شيوعًا المستخدمة اليوم.

حالة JS 2020: مخطط أطر عمل أمامي يُظهر Vue.js في الثانية.

Vue.js هو ثاني أكثر إطار عمل للواجهة الأمامية شيوعًا. (المصدر: State of JS 2020 )

لماذا يستخدم المطورون Vue.js

تدفع الأسباب المختلفة المطور لاستخدام تقنية معينة. دعونا نناقش لماذا نعتقد أنه يجب عليك تعلم Vue.js.

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

أداة Vue CLI جنبًا إلى جنب مع أدوات تطوير الواجهة الأخرى تجعل إعداد Vue.js أمرًا سهلاً. تم إعداده مع بعض الوظائف بشكل افتراضي ، ولكن يمكنك أيضًا إنشاء رمز باستخدام منطق وبنية DRY (لا تكرر نفسك).

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

بعد ذلك ، دعنا نناقش إيجابيات وسلبيات Vue.js.

إيجابيات وسلبيات Vue.js

Vue.js هو ثاني أكثر الإطارات شيوعًا في الاستخدام اليوم. دعونا نرى ما الذي يجعله متمسكًا بمطوري الويب ، وما الذي يدفعهم بعيدًا.

إيجابيات Vue.js

سنبدأ باستكشاف الجوانب الإيجابية لـ Vue.js.

حجم صغير

يحتوي Vue.js على حجم صغير جدًا قابل للتنزيل يبلغ حوالي 18 كيلوبايت وهو ممتاز مقارنة بأطر العمل الأخرى ذات الأحجام الكبيرة. ومع ذلك ، بهذا الحجم ، سيؤثر Vue.js بشكل إيجابي على تحسين محركات البحث و UX لتطبيق الواجهة الأمامية الخاص بك .

مكون ملف واحد وقابلية القراءة

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

نظام الأدوات الصلبة

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

سهل الاستخدام

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

سلبيات Vue.js

الآن بعد أن غطينا الإيجابيات ، دعنا نستكشف سلبيات Vue.js.

التعقيد التفاعلي

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

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

حاجز اللغة

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

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

مخاطر الإفراط في المرونة

كما هو مذكور أعلاه ، فإن Vue.js مرن للغاية وسهل الاستخدام. لذلك ، من السهل أن يكون لديك الكثير من أكواد السباغيتي في كل مكان حيث يمكن أن يكون لكل فرد في فريق المؤسسة آراء مختلفة حول كيفية القيام بالأشياء.

من إيجابيات وسلبيات Vue.js التي تمت مناقشتها أعلاه ، ربما تكون قد اكتشفت بالفعل بعض الميزات التي تحبها والبعض الآخر الذي لن يعمل بشكل جيد بالنسبة لك.

10 أشياء يجب أن تعرفها عن Vue.js

فيما يلي الأشياء العشرة التي تحتاج إلى معرفتها حول Vue.js ولماذا من الضروري معرفتها.

الخصائص المحسوبة

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

يكون مفيدًا عندما تريد تكرار العديد من الطرق الصغيرة لأشياء مثل التنسيق أو تغيير القيم أو عملية واسعة تحتاج إلى تشغيلها في مواقف معينة.

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

بافتراض أنك تريد تنسيق سلسلة بأحرف كبيرة ، فإليك كيفية القيام بذلك:

<template>
  <div>
    <p> I love {{ value.toUpperCase() }} </p>
  </div>
</template>

ماذا يحدث إذا احتجت إلى تغيير valueالمتغير في 50 مكانًا مختلفًا؟ منتفخة ، أليس كذلك؟ حسنًا ، الخصائص المحسوبة هنا للمساعدة:

<template>
  <div>
    <p> I love {{ value }} </p>
  </div>
</template>
<script>
  export default {
    computed:{
      value(){
        return this.value.toUpperCase()
      }
    }
  }
</script>

يمكنك بسهولة التغيير toUpperCase()إلى toLowerCase()، وسوف ينعكس في كل مكان من نقطة واحدة.

التعامل مع الحدث

يجعل Vue.js التواصل بين الطفل والوالدين أمرًا سهلاً باستخدام $emitو v-on. يصبح التعامل مع الاتصال بين التسلسلات الهرمية للمكونات أمرًا سهلاً ومباشرًا.

و $emitظيفة تقبل معلمتين: سلسلة لاسم وقيمة اختيارية إلى أن تنبعث.

و v-on:event-nameيستخدم في المكون الطفل لاستقبال الحدث المنبعثة من المكون الأم:

<template>
  <section>
    <button @click="onClick">Add </button>
  </section>
</template>
<script>
export default {
  name: "AddEvent",
  methods: {
    onClick() { 
      this.$emit('add', this.data);
    }
  }
}
</script>

بمجرد تشغيل Addالزر ، تقوم onClickالطريقة بتشغيل $emitالحدث ، والذي يرسل addالحدث إلى مكون فرعي يستمع إلى addالحدث.

دعنا نلقي نظرة على كيفية الاستماع إلى حدث ما:

<template>
  <section>
  <p v-show="showSaveMsg">This component is listening to the ADD event</p>
  <add-event v-on:add="onAdd"></add-event>
  </section>
</template>
<script>
export default {
  data(){
    return {
      showSaveMsg: false
    }
  },
  components:{
    AddEvent: () => import('./AddEvent')
  },
  methods: {
    onAdd() { 
        this.showSaveMsg = true;
    }
  }
}
</script>

يستمع الكود أعلاه إلى addالحدث ويستجيب عن طريق تغيير قيمة showSaveMsgإلى true، مما يعرض الرسالة مرة أخرى.

مكونات التحميل / عدم التزامن

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

يتم تحقيق التحميل البطيء من خلال عمليات الاستيراد الديناميكية لـ Webpack ، والتي تدعم أيضًا تقسيم الكود.

يسمح Vue.js بالتحميل البطيء للمكونات ويمكن تحقيقه عالميًا باستخدام البرامج النصية التالية:

import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));

يمكنك تحقيق ذلك محليًا باستخدام مكون مثل أدناه:

<template>
  <div>
    <component></component>
  </div>
</template>
<script>
export default {
  components: {
    'Component': () => import('./Component')
  }
}
</script>

المكونات العالمية

يمكننا تحقيق إمكانية إعادة استخدام كبيرة في Vue.js باستخدام مكونات عالمية ، حيث تقوم بتسجيل مكون مرة واحدة ثم استخدامه في كل مكان داخل مثيل Vue.js الخاص بك.

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

تأكد دائمًا من تسجيل المكونات العالمية التي تحتوي على العديد من حالات الاستخدام عبر مشروعك كما هو موضح أدناه:

import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));

مكون ملف واحد

تعد المكونات من أقوى ميزات Vue.js ؛ يساعدك على توسيع عناصر HTML الأساسية و CSS و JavaScript لتغليف التعليمات البرمجية القابلة لإعادة الاستخدام.

يمكن أن تساعد المكونات في تقسيم المشاريع الكبيرة إلى أجزاء أصغر قابلة لإعادة الاستخدام يمكننا تمديدها عبر المشروع بأكمله ، وبالتالي تشجيع مبدأ DRY (لا تكرر نفسك) في هندسة البرمجيات.

يمكن أن يوفر تنظيمًا وتغليفًا للمشاريع الكبيرة ، ورمزًا قابلًا لإعادة الاستخدام ، ويمكن فصله إلى .vueملفات.

<template>
  <section>
    <button @click="onClick">Add</button>
  </section>
</template>

<script>
export default {
  name: "CustomButtom",
  methods: {
    onClick() { 
      this.$emit('add', this.data);
    }
  }
}
</script>

<style scoped>
  button{
    /** Button Styles */
  }
</style>

تنشئ البرامج النصية أعلاه مكون زر مخصصًا يمكننا إعادة استخدامه داخل مشروعنا. يحتوي كل مكون على HTML و CSS وجافا سكريبت.

اختبارات

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

قد يكون من المفيد لك إلقاء نظرة سريعة على الاختبار باستخدام هذه الأدوات. لذلك دعنا نستكشف تثبيت مشروع تجريبي وإعداده واختباره أدناه.

إذا كنت تستخدم أداة Vue CLI الموصى بها لإعداد مشروعك ، فقم بتشغيل الأوامر التالية:

هل سئمت من دعم استضافة وورد بريس دون المستوى دون إجابات؟ جرب فريق الدعم العالمي! تحقق من خططنا

vue add unit-jest //to run unit test with jest

npm install --save-dev @vue/test-utils

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

// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'

// The component to test
const MessageComponent = {
  template: '<p>{{ message }}</p>',
  props: ['message']
}

test('displays a message', () => {
  // mount() returns a wrapped Vue component we can interact with
  const wrapper = mount(MessageComponent, {
    propsData: {
      msg: 'Welcome to our testing world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Welcome to our testing world')
})

تحتوي مكتبة Vue Testing Library على خيارين رائعين لاختبار المكونات الخاصة بك: Mount and Shallow.

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

أداة Vue CLI القوية

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

للتوضيح ، دعنا نثبت Vue CLI عالميًا:

npm install -g @vue/cli

بعد ذلك ، يمكنك اختبار أي مكون عن طريق تشغيل الأمر أدناه:

vue serve ./components/views/Home.vue

إذا كنت ترغب في سحب مكون معين ، على سبيل المثال ، لمشاركته مع زملائك ، فيمكنك تحقيق ذلك باستخدام الأمر أدناه:

vue build --target lib --name goldenRule ./components/views/Home

Vue CLI قوي جدًا ويمكنه توفير الكثير من الوقت الإنتاجي إذا أتقنت فن استخدامه. إذا كنت تريد معرفة المزيد ، يمكنك إلقاء نظرة خاطفة على الوثائق الرسمية .

إدارة الدعائم

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

لإنشاء خاصية جديدة في مكون Vue ، يمكنك القيام بذلك بعدة طرق مختلفة. بافتراض أن لديك المكون الخاص بك ، فأنت بحاجة إلى إنشاء isAdminالدعامة.

دعنا نرى الطرق المختلفة التي يمكنك القيام بها:

<template>
  <section>
    <component v-if="isAdmin"></component>
  </section>
</template>
<script>
export default {
  name: 'Component',

 // One
  props: {
    isAdmin: {
      type: Boolean,
      default: false,
      required: true
    }
  },
 
 // Two
  props: ['isAdmin'],

 // Three
  props: {
    isAdmin: Boolean
  }

}
</script>

التحقق من صحة الدعامة الخاصة بك مهم جدا. لحسن الحظ ، الأمر بسيط جدًا أيضًا:

// ...

 // One
  props: {
    isAdmin: {
      default: false,
      required: true,
      validator: function(value) {
        return typeof === 'boolean';
      }
    }
  },

// ...

أخيرًا ، يعد تعديل الدعائم أمرًا سهلاً مثل مجرد إعادة تنظيم قيمها:

//...

methods: {
  isAdmin() {
    this.isAdmin = true;
  }
}

//..

لتعيين قيمة الخاصية في مكون رئيسي:

<template>
  <section>
    <component :isAdmin="true"></component>
  </section>
</template>

العرض من جانب الخادم (SSR)

مع كل الميزات والفوائد الرائعة لاستخدام Vue.js لإنشاء تطبيقات الواجهة الأمامية ، لا تزال Vue.js نفسها مكتبة من جانب العميل تعرض عناصر DOM وتعالجها فقط.

يساعد العرض من جانب الخادم الأطر من جانب العميل مثل Vue.js على تحقيق أفضل. سترى برامج زحف محرك البحث الصفحات المعروضة بالكامل من موقع الويب الخاص بك عند الزحف.

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

يعد التقديم من جانب الخادم (SSR) أسلوبًا شائعًا لعرض تطبيق عادي أحادي الصفحة (SPA) من جانب العميل على الخادم ثم إرسال صفحة كاملة إلى القارئ.

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

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

تعيين

سيقدم Vue.js العديد من التحذيرات والأخطاء وأحجام الملفات المتضخمة أثناء التطوير ، لكن هذه المشكلات تختفي على الفور عند تشغيل الإنتاج للنشر. سوف Vue.js تلقائيا أدوات تكوين Webpack بناء، minifications ، واستخراج CSS وتطهير، التخزين المؤقت، وتتبع أخطاء وقت التشغيل، وأكثر من ذلك.

يجعل Vue.js عملية النشر الخاصة بك سهلة للغاية من خلال التكوين والإعداد التلقائي لبيئة الإنتاج دون أي خطوات إضافية من المطور.

ل نشر التطبيق Vue.js الخاص بك ، يمكنك أن تقرأ من خلال أدلة العامة.

ملخص

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

نأمل أن تكون قد طورت معرفتك بـ Vue.js لتقديم تطبيقات أمامية قابلة للتطوير وعالية الأداء.

استمر في الترميز!