نسخه سوم از فریمورک محبوب vuejs در تاریخ ۱۸ سپتامبر ۲۰۲۰ منتشر شد.
در این نسخه تغییرات و قابلیت‌های زیادی اضافه شده که در این مقاله میخوام به این تغییرات اشاره کنم.
نسخه سوم فریمورک ویو‌جی‌اس که در این لینک قابل دسترس هست با نام نسخه "One Piece" (مانگای ژاپنی) منتشر شده. اپدیت‌های بزرگ vue با نام یک انیمه نام‌گذاری میشن که نسخه سوم "One Piece" نام گرفته.
برای دانلود و استفاده از نسخه ۳ باید به این لینک برید یا اینکه به صفحه گیت‌هاب مخصوص این نسخه برید و از اونجا دانلود کنید.
دلیل اینکه هنوز این نسخه به صفحه گیت‌هاب اصلی vue نیومده و وب‌سایت vue هم همچنان نسخه قبلی رو نشون میده، اینه که این اپدیت به‌صورت مرحله‌ای منتشر میشه و مراحل انتشار کم‌کم تا آخر سال 2020 کامل میشه و کتابخونه‌های رسمی ویو، مثل vuex, router, cli, devTools و... هم کم‌کم با نسخه ۳ سازگار میشن. البته که نسخه ۳ پایدار هست و اگر هنوز vuejs رو یاد نگرفتید، از نسخه ۳ شروع به یادگیری کنید.
اگر می‌خواید پروژه جدیدی رو شروع کنید، چون مشخص نیست در آینده تغییرات به چه صورت باشه یا کتابخونه‌های جانبی چقدر با نسخه جدید سازگار باشن، از نسخه ۲ شروع کنید ولی اگر می‌تونید یکم دیگه صبر کنید، تا نسخه ۳ نهایی بشه و اونموقع پروژه رو شروع کنید.
معرفی Composition API
یکی از مهم‌ترین ویژگی‌های این نسخه، Composition API هست که یک روش متفاوتی رو برای نوشتن componentها پیش پای شما میگذاره، البته شما می‌تونید کماکان از روش قدیمی Options API برای ساخت component هم استفاده کنید. روش Composition API برای مواجهه با پروژه‌های بزرگی که componentهای بزرگی دارن کاربردی‌تر هست. قابل ذکره که این ویژگی از React Hooks الهام گرفته شده.
معرفی Teleport
کسایی که react کار میکنن با مفهومی به نام portal آشنا هستن و حالا این مفهوم در vue با نام تلپورت معرفی شده. البته در نسخه قبلی vue میشد از طریق یک پلاگین به این ویژگی دست پیدا کرد که حالا در نسخه ۳ این قابلیت بومی شده.
با استفاده از این ویژگی شما می‌تونید یک قسمت از کد که داخل کامپوننت دیگه‌ای قرار داره رو داخل یک کامپوننت دیگه رندر کنید، حتی اگر اون کامپوننت داخل scope اپ شما نباشه. این ویژگی برای کار با modal, notification, popup خیلی کاربردیه.
معرفی Fragments
حتما در vue با پیغامی مواجه شدید که به شما می‌گه فقط میشه یک تگ ریشه داخل template داشت و مجبور بودید تگ‌ها رو داخل یک div دیگه بزارید تا از شر این خطا راحت بشید.
<template> <div>VueJs</div> <div>Is</div> <div>Awesome</div> </template>
اما در vuejs جدید این محدودیت برطرف شده و حالا میشه چندتا تگ داخل تگ template داشت.
بازنویسی فریمورک با TypeScript
کدهای vuejs نسخه ۳ با استفاده از TypeScript بازنویسی شدن که ساپورت خوبی رو از TypeScript به عمل میارن. البته استفاده از TypeScript برای نوشتن اپ‌های ویو همچنان optional هست.
وی‌مدل‌های بیشتر
قبل از این نسخه فقط میشد یک v-model برای کامپوننت تعریف کرد. اما حالا این محدودیت برطرف شده و میشه چند v-model برای یک کامپوننت تعریف کرد.
تعلیق!
تعلیق یا همون suspense ویژگی هست که کامپوننت‌هایی که async باشن، تا وقتی کامل لود بشن و دیتاها رو دریافت کنن، یک کامپوننت پیش‌فرض به‌جاش نشون داده میشه.
سرعت
بنچمارک‌ها نشون میدن که در نسخه سوم ویو در مقایسه با نسخه دوم، سرعت افزایش پیدا کرده و نسخه ۳ پرفورمنس بهتری رو به ارمغان میاره. SSR هم دو تا سه برابر سرعتش بیشتر شده و همچنین سایز این فریمورک هم آب رفته و کوچک‌تر از قبل شده.
تغییرات دیگه
برای ساخت یک instance تو نسخه جدید باید از createApp() استفاده کرد.
دیتا باید متود باشه و دیگه نمیشه از object برای تعریف data استفاده کرد.
برای ساخت vue router باید از سینتکس createRouter() استفاده کرد.
و همینطور برای ساخت vuex باید از createStore() استفاده کرد.
و در حال حاضر IE11 ساپورت نمیشه.
تغییرات دیگری هم در این نسخه داشتیم که می‌تونید به مستندات vuejs مراجعه کنید.
ممنونم که این مطلب رو تا انتها خوندید و امیدوارم مفید بوده باشه :)
