معرفی vue3 و مقایسه با vue2

سلام دوستان

اگر روی این مطلب کلیک کردین ، احتمالا توسعه دهنده ی فرانت اند یا علاقمند به این حوزه هستید و تاحدودی با این فریم ورک آشنایی دارین و راجع بهش شنیدین . خب اگر از این زاویه به موضوع نگاه کنیم زیاد لازم نیست که از پایه توضیح بدیم vuejs چطوری بوجود اومد ،‌ رشد کرد ،‌تبدیل شد به یکی از طرفدار ترین فریم ورک های JavaScript و ....

حالا برای اینکه بازم یکم عمیق تر بشه آشناییتون با این فریم ورک می تونید یک نگاهی به سرفصل های لینک زیر بندازید

بریم سر اصل داستان :)

معرفی vue نسخه سوم

نسخه سوم این فریم ورک محبوب در تاریخ ۱۸ سپتامبر ۲۰۲۰ بصورت رسمی با نام (Vue 3.0 یا "One Piece") منتشر شد. من سعی می کنم نکات مهمی راجع به این نسخه از فریم ورک رو خدمتتون ارائه کنم. و توضیحات بیشتر رو ارجاع میدم به مطالعه داکیومنت های خود vue .
لینک یوتیوب زیر اعلامیه جهانی انتشار vue 3.0 هستش

خب در ادامه یک بررسی اجمالی دارم راجع به اینکه در نسخه سوم چه بهبود های چشم گیری ارائه شده و چطوری این بهبود ها می تونن توسعه دهنده ها رو قانع کنن که از vue نسخه ی سوم استفاده کنند.قطعا تغییرات بیشتری از چیزهایی که من اینجا میگم اعمال شده ولی در رفرنس ها این موارد رو بیشتر روش زوم کردن و منم همین موارد رو جمع آوری کردم.

حجم باندل پکیج :

اگر یک پروژه یکسان رو با استانداردها و API های استاندارد نسخه های ۲ و ۳ بصورت مجزا توسعه بدهید ، باندل پکیج نسخه ۳ به دلیل پشتیبانی بهتر از tree shaking و استفاده از global API ها , Vue helper های متنوع ، حجم کمتری خواهد داشت. اگر براتون سواله که tree shaking چیه یه توضیح مختصر می دم :

فرایند tree shaking در جاوا اسکریپت:

اگر از vueCli برای توسعه ی وب اپلیکیشن های مبتنی بر این فریم ورک استفاده می کنید ، احتمالا با تنظیمات webPack برای گرفتن بیلدهای مختلف (develop,poroduction .... ) سر و کار داشتین ، هم چنین dependency هایی که در کامپوننت و یا هرکدوم از اجزای وب اپلیکیشن رو با دستور import به اون بخش اضافه کردید. فرایند tree shaking در webpack هنگام گرفتن بیلدهای مختلف تلاش می کنه با تنظیماتی که ما براش فراهم می کنیم ، بیلد بهینه تر و کوچکتری تولید کنه.

برای توضیحات بیشتر می تونید این لینک رو مطالعه کنید

View declaration(ترجمه ای برای این پیدا نکردم)

نسخه دوم vue از template ها هم به خوبی render function ها پشتیبانی می کرد . نسخه سوم هم به همین صورت پیاده سازی شده ، با این تفاوت که پرفورمنس و سرعت تولید خروجی هایی که توسط diff algorithm ها تولید می شن رو افزایش دادن. (نیازی نیست که توسعه دهنده بدونه که چه اتفاقاتی می افته که یک المان تولید می شه و الگوریتم های diff چطور کار می کنند ، اگر خوره این مطلب هستین به لینک انتهای این سرتیتر مراجعه کنید ) .

render Function approach

import { defineComponent, h } from &quotvue&quot

export default defineComponent({
  name: &quotMyComponent&quot,
  props: {
    someProp: {
      type: Boolean
    }
  },
  render() {
    const { someProp } = this.$props
    const { default: defaultSlot, slotOne, slotTwo } = this.$slots

    const child = h(&quotspan&quot, { class: &quotinner&quot }, defaultSlot)

    return h(
      &quotdiv&quot,
      {
        class: {
          &quotstatic-class&quot: true,
          &quotsome-class&quot: someProp
        }
      },
      [slotOne && slotOne(), child, slotTwo && slotTwo()]
    )
  }
})

template approach

<template>
  <div class=&quotstatic-class&quot :class=&quot{ 'some-class': someProp }&quot>
    <slot name=&quotslotOne&quot />
    <span class=&quotinner&quot>
      <slot name=&quotdefault&quot />
    </span>
    <slot name=&quotslotTwo&quot />
  </div>
</template>


import { defineComponent } from &quotvue&quot

export default defineComponent({
  name: &quotMyComponent&quot,
  props: {
    someProp: {
      type: Boolean
    }
  }
})

نیازمندی های قبل از مطالعه لینک زیر برای کاهش سردرگمی :)

۱- تسلط کامل به DOM

۲- اشنایی با virtual Dom

واقعا سریعتر

برای ایجاد سرعت بیشتر در compile و توسعه و پیاده سازی ، virtual DOM در این نسخه از پایه بازنویسی شده ، این بازنویسی باعث شده که فرایندهای mounting و patching با سرعت بیشتری صورت بگیره.

فرایند های patch و mounting رو میشه یک زمان دیگری راجع بهش صحبت کرد ولی تنها بدونید که در اسکوپ lifecycle کامپوننت و اپلیکیشن هستش. یعنی اینکه از زمانی که js سعی می کنه virtualDOM رو بسازه یک سری state ها وجود دارن که بهشون می گن lifeCycle و توسط lifeCycle Hook ها به شما اجازه داده میشه که یک سری event یا فرایندهایی رو آغاز کنید یا پایان بدین. رفرنس رو در زیر قرار می دم:

علاوه بر بازنویسی virtualDom پارامترهای زیر رو هم در نسخه سوم بهبود بخشیدند

Optimized Slots Generation

وقتی یک کامپوننت پدر در نسخه ۲ ریرندر می شد، child ها هم محکوم به rerender بودند ، اما الان می تونن مجزا rerender بشن

Static Tree Hoisting

الان در نسخه سوم vue می تونه تشخیص بده که کدوم المان ها static هستن و اونها رو hoist کنه .اینها باعث میشن کمتر rerenderingرخ بده و از patch شدن تمام element tree ها جلوگیری می کنه.

Static Props Hoisting

دقیقا مثل مثال قبلی برای node ها اعمال میشه.

Proxy-based Observation

اگر با reactivity سیستم نسخه دوم vue کار کرده باشید ، حتما از getter و setter که منطبق بر Object.defineProperty هستند ، بهره بردین . حالا در نسخه سوم از پراکسی های ٖES2015 برای مکانیسم observation خودش استفاده می کنه. این کار باعث شده که ۲ برابر سرعت اپلیکیشن بیشتر بشه و مصرف مموری هم نصف بشه (تااااادااااا)

البته برای پشتیبانی از اینترنت اکسپلورر (خخ) همچنان شما می تونین از observation mechanism های نسخه ۲ در نسخه ۳ استفاده کنید.

بهینه سازی در Composition API

همونطوری که در تیتر قبلی گفته شد مکانیسم observation یا همون reactivity در نسخه ۲ توسط Object.defineProperty یا همون setter و getter پیاده سازی می شدن. این باعث میشد یک سری محدودیت ها به توسعه دهنده اعمال بشه (مثلا اینکه اگر یک آرایه رو طبق index اش می خاستین اپدیت کنید با روش های معمول نمیشد و باید از vue.use استفاده می کردین که مسخرس !!!).

الان برای استفاده از reactivity API های جدید ،‌لازم نیست که یک Vue Instance داشته باشین . شما به وسیله فراخوانی این API ها به تنهایی می تونید ازشون برای ساختن ، مشاهده و یا نمایش تغییرات در state ها استفاده کنید (create, observe, and react).

تنها کاری که می کنید اینه که ابتدا

import { reactive } from 'vue'

بعدش یک آبجکت بصورت زیر میسازید

const state = reactive({ count: 0 })

حالا به API های lifecycle در همان Vue Instance دسترسی دارید . فقط دقت کنید که در این نسخه API های lifeCycle در متد setup باید استفاده بشن .

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('component is mounted.')
    })
  }
}

پشتیبانی بهتر از Type Script

هیچی دیگه خیلی بهتر می تونید از TypeScript مخصوصا به دلیل تغییراتی که در Compositon API ها بوجود اومده استفاده کنید . و هم چنین مزایای دیگه TypeScript نسبت به استفاده از ‌جاوا اسکریپت به روش سنتی و ....

استفاده از Hook API

در نسخه های قبلی Vue برای اینکه یک منطق بتونه توسط کامپوننت های مختلف مورد استفاده قرار بگیره از mixin استفاده می کردند. مدتی گذشت تا خانم Sarah Drasner اعلام کرد که اگر یک state در یک mixin درحال تغییر باشه و همچنین mixin دیگری هم اون رو بازنویسی کنه مشکل chaining of encapsulated logic پیش می یاد به همین دلیل در نسخه جدید از Hook APIاستفاده شده.

در لینک زیر می تونید راجع به جریانات این بخش بیشتر بخونید :

جمع بندی :

نسخه سوم این فریم ورک دوست داشتنی قابلیت های زیادی در دل خودش جا داده ، اما اگر علاقمند به یادگیری این فریم ورک هستین ، توصیه می شه که از نسخه ۲ شروع کنید ، چون هم داکیومنت های کامل تری داره و هم کامیونیتی اش اکثرا دارن از این نسخه استفاده می کنند و بهتر می تونن کمکتون کنن.

نسخه سوم vue برای پروژه های بزرگ می تونه قابلیت های بیشتری داشته باشه. و بتونید از تمامی ظرفیت هاش استفاده کنید.

بررسی پرفورمنس

برای مهاجرت از نسخه ۲ به ۳ هم احتمالا یک مقاله دیگه بذارم.(شایدم نذارم ،‌نمی دونم).ولی خب خود دوستان توسعه دهنده قول دادن که داکیومنت های نسخه ۳ رو کامل تر کنند و اگر چیز جالبی دیدم حتما به اشتراک می ذارم.