🧔🏼 🥋 🛌🏾 متى يجب على مطور الواجهة الأمامية التبديل من React إلى Vue ، ومتى سيعقّد التطوير 🔍 👶🏼 🕞

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

تمت الترجمة بدعم من منصة السحابة السحابية Mail.ru Cloud Solutions .

لذا ، أنت مطور React وقررت تجربة Vue. لنبدأ!

تفاعل و Vue كلاهما كوكا كولا وبيبسي. يمكن أيضًا تنفيذ الكثير مما يمكنك فعله باستخدام React باستخدام Vue. في الوقت نفسه ، هناك العديد من الاختلافات ، بعضها يعكس تأثير الإطار الزاوي على Vue.

تركز هذه المقالة على الاختلافات ، لذلك ستغرق على الفور في عالم Vue وترى الفوائد.

ما مدى اختلاف React و Vue؟

تفاعل و Vue لديهما أوجه تشابه أكثر من الاختلافات:

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

الاختلافات الملحوظة هي أن Vue يستخدم عادةً ملفات قالب HTML ، ويستخدم React ملفات JavaScript فقط. تحتوي مكتبة Vue أيضًا على حالة قابلة للتغيير ونظام إعادة رسم تلقائي للقالب يسمى "التفاعلية".

مكونات

في مكتبة Vue ، يتم توصيل المكونات باستخدام طريقة API .componentتأخذ وسيطات المعرفات وكائن بمتغيرات التعريف. من المحتمل أن يلاحظ مطور React الجوانب المألوفة وغير المألوفة لتعريف مكونات Vue في هذا الرمز:

Vue.component('my-component', {
  //<strong> </strong> Props
  props: [ 'myprop' ],
  // <strong> </strong> Local state
  data() {
    return {
      firstName: 'John',
      lastName: 'Smith'
    }
  },
  // <strong>  </strong>Computed property
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  // <strong> </strong>Template
  template: `
    <div>
      <p>Vue components typically have string templates.
      <p>Here's some local state: {{ firstName }}
      <p>Here's a computed value: {{ fullName }}
      <p>Here's a prop passed down from the parent: {{ myprop }}
    </div>
  `,

  // <strong>    </strong>Lifecycle hook
  created() {
    setTimeout(() => {
      this.message = 'Goodbye World' 
    }, 2000);
  }
});

قالب

كما ترى ، فإن المكون له خاصية template، وهي عبارة عن سلسلة مع ترميز HTML. تتضمن مكتبة Vue مترجمًا يحول هذه السلسلة إلى وظيفة تقديم في وقت التشغيل. تستخدم وظائف العرض هذه محرك Virtual DOM.

لا يمكنك استخدام الخاصية templateإذا قررت بدلاً من ذلك إنشاء وظيفة العرض الخاصة بك. يمكنك حتى استخدام ترميز JSX من عالم التفاعل. ولكن سيكون من الغريب التحول إلى Vue والقيام بذلك بهذه الطريقة - كيفية القدوم إلى إيطاليا ورفض البيتزا ...

خطافات دورة الحياة

تحتوي مكونات Vue على طرق دورة حياة مماثلة لتلك الموجودة في مكونات React. على سبيل المثال ، يبدأ الخطاف createdمن المثال أعلاه عندما تكون حالة ( state) المكون جاهزة ، ولكن قبل إرفاق المكون بالصفحة. رد فعل من العالم - getDerivedStateFromProps.

ولكن هناك اختلاف واحد كبير: في مكتبة Vue لا يوجد نظير لمكتبة React shouldComponentUpdate. هذا ليس ضروريًا بسبب نظام تفاعل Vue.

إعادة رسم المكون

تتمثل إحدى خطوات تهيئة المكوّن في عرض جميع خصائصه وتحويلها إلى حروف ومستوطنين. كما ترى ، تلقت الخاصية messageالمأخوذة من البيانات الأصلية ( props) طريقتين إضافيتين - getو set:

يرفق Vue هذه الوظائف لتمكين تعقب التبعية وإشعارات تغيير الملكية عندما يقرأها البرنامج أو يغيرها.

دولة قابلة للتغيير

لتغيير الحالة في Vue ، لا تحتاج إلى استدعاء طريقة منفصلة this.setState، كما هو الحال في React. أنت فقط تكتب التغييرات مباشرة:

// React
this.setState({ message: 'Hello World' });
// Vue
this.message = 'Hello World';

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

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

القالب الرئيسي

فيما يتعلق بملف قالب المشروع الرئيسي ، فإن Vue تشبه إلى حد كبير Angular. كما هو الحال في React ، يجب تثبيت قالب Vue في مكان ما على الصفحة:

<body>
  <div id="root"></div>
</body>

// React
ReactDOM.render('...', document.getElementById('root'));

// Vue
new Vue({
  el: '#root'
});

ومع ذلك ، على عكس React ، يمكنك إضافة تخطيط منتظم لهذا العنصر الجذر. إذا قام React بمسح كل شيء داخل العنصر عند تركيب المكون #root، فسيوفر Vue:

<div id="root">
  <div>You can add more markup to index.html</div>
  <my-component v-bind:myprop="myval"></my-component>
</div>

هناك أيضًا طريقة لتعريف قوالب المكونات الفرعية في ملف html الجذر عبر امتدادات HTML5 مثل x-template أو inline-template. هذا لا يعتبر أفضل ممارسة ، لأنه يفصل القالب عن تعريف المكون بأكمله ككل.

التوجيهات

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

new Vue({
  el: '#app',
  data: {
    mybool: true,
    myval: 'Hello World'
  }
});
<div id="app">
  <div v-if="mybool">This renders if mybool is truthy.</div>
  <my-component v-bind:myprop="myval"></my-component>
</div>

القيمة المعينة للتوجيه هي تعبير JS ، لذا يمكنك الرجوع إلى خصائص البيانات ، بما في ذلك استخدام عوامل التشغيل الثلاثية ، وما إلى ذلك.

منظمة المشروع

لا يوجد مكافئ رسمي لتفاعل إنشاء التطبيق في مكتبة Vue ، ولكن هناك بنية تم إنشاؤها بواسطة مجتمع مطوري Vue: create-vue-app.

التوصية الرسمية لبدء مشروع على Vue هي vue-cli. يمكنه إنشاء كل شيء بدءًا من مشروع بسيط بملف HTML واحد إلى مشروع Webpack + Server-Side Rendering المملوء بالكامل:

$ vue init template-name project-name

المشاريع مع ملف HTML واحد

وصف منشئ Vue.js ، إيوان يو (You Yu Xi) ، مشروعه بأنه "إطار تقدمي" لأنه يمكن تطويره لتطبيقات معقدة أو تبسيط للتطبيقات الصغيرة.

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

إليك كيفية إضافة Vue إلى مشروع بملف HTML واحد:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

مهم! إذا كنت لن تستخدم سلاسل القوالب ، وبالتالي لا تحتاج إلى مترجم القالب ، فاستخدم نسخة مبسطة من المكتبة التي لا تحتوي على هذه الوظائف - vue.runtime.js. حجمه أقل من 20 كيلوبايت تقريبًا.

مكون في ملف واحد

إذا كنت محظوظًا بما يكفي لإضافة مرحلة البناء لمشروعك باستخدام أدوات مثل Webpack ، يمكنك استخدام مكونات ملف Vue الفردية (SFCs ، مكونات Vue في ملف واحد). هذه هي الملفات ذات الامتداد .vue، فهي تغلف قالب المكون وتكوين JS والأنماط في ملف واحد:

<template>
  <div class="my-class">{{ message }}</div>
</template>
<script>
  export default {
    data() {
      message: 'Hello World'
    }
  }
</script>
<style>
  .my-class { font-weight: bold; }
</style>

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

هناك محمل Webpack يسمى vue-loader وهو المسؤول عن بناء SFCs. أثناء عملية التجميع ، يتم تحويل القالب إلى وظيفة عرض ، ويعد هذا مثاليًا لاستخدام التجميع المجرد لأسفل vue.runtime.js في المستعرض.

Redux والباقي

لدى Vue مكتبة إدارة دولة قائمة على التدفق تسمى Vuex. هذه المرة تشبه Redux ، ولكن هناك بعض الاختلافات.

ما الذي يحصل عليه المطور عند التبديل من React إلى Vue؟

لفهم المشكلة بالكامل ، قمت بتكملة المقالة وأخبرت متى يكون من الأفضل اختيار React ، ومتى Vue.

من المرجح أن يؤدي التبديل إلى Vue إلى تسهيل دخول الأشخاص الجدد إلى المشروع. يمكن كتابة قوالب Vue مباشرة في HTML. أيضًا ، بالنسبة للمشاريع الصغيرة ، ليس من الضروري معرفة أحدث ميزات ES ++ وتكوين تجميع التعليمات البرمجية من خلال أدوات مثل Webpack و Babel. يمكن كتابة رمز Vue بنمط jQuery ، أي مباشرة في القالب.

لدى Vue أيضًا نظام ملائم لتوصيل رسائل الحالة الجاهزة. لا يحتاج المطورون إلى القلق بشأن استدعاء طريقة غير متزامنة setState( كما هو الحال في React ) أو توصيل المكتبات الخارجية للتحكم في تسليم الحالة (مثل Mobx ).

أخيرًا ، يمكن أن تكون التطبيقات المكتوبة باستخدام Vue أسهل بشكل ملحوظ: غالبًا ما تكون هناك حاجة إلى المكتبة نفسها فقط أو حتى نسختها المجردة من vue.runtime.js. في حين أن التطوير الحديث على React يكاد يكون مستحيلًا بدون بابل وحزم ضخمة يصل وزنها إلى عدة ميغابايت.

مشاريع Vue ، من ناحية أخرى ، يمكن أن تكون معقدة للغاية إذا كان لديك تطبيق كبير أو منطق معقد على العميل. إذا تم التخطيط في قالب HTML ، يصبح من الصعب اختبار أجزاء من التطبيق. React ، الذي يستخدم رمز JS فقط ، يوفر المزيد من الميزات لإعادة استخدام وتوسيع الكود. أيضًا ، إذا كتبت في React ، يمكنك إعادة استخدام التعليمات البرمجية الخاصة بك عند كتابة تطبيقات للأجهزة التي تستخدم React-Native دون الكثير من النفقات. ليس هذا هو الحال مع Vue.

لذلك ، قد يكون الاستنتاج كما يلي:

, , . ;
, : Vue, - React.

Mail.ru Cloud Solutions.

متى يجب على مطور الواجهة الأمامية التبديل من React إلى Vue ، ومتى سيعقّد التطوير