معرفی اولیه 

فریمورک های زیادی برای توسعه ی فرانت اندِ وب ساخته شده اند که کار را برای برنامه نویسان وب راحت تر کرده اند. فریمورک vue.js ، react.js و angular.js معروف ترین آنهاست.

اگر به تازگی قصد دارید Vue.js را شروع کنید احتمالا این سوال را در ذهن دارید که کدام نسخه ی این فریمورک بهتر است؟ اوکی ، اگر بخواهیم درباره ی Vue 2 صحبت کنیم در حال حاضر بازار کار را در دست دارد و تقریبا اکثر شرکت های جهان از آن برای ساخت وب اپلیکیشن های ریسپانسیو استفاده میکنند.

با انتشار Vue 3 توسعه دهندگان کنجکاو هستند تا مفاهیم فنی معرفی شده در آخرین نسخه ی Vue js را بدانند.نسخه ی ۳ فریمورک ویو جی اس با ویژگی های نوآورانه منتشر شده است که باعث میشود پروژه ی شما سرعت بیشتری داشته باشد و کتابخانه هایی را ارائه داده تا وب سایت شما پاسخگوتر از قبل باشد.

 

تاریخچه ی فریمورک ویو جی اس ( Vue.js )

قبل از اینکه مقایسه ی بین Vue 2 و Vue 3 را شروع کنیم بهتر است بدانیم فریمورک vue.js چه مسافرتی را طی کرده تا به این جایگاه برسد.

فریمورک ویو جی اس در ابتدا یک کتابخانه ی runtime ساده بود که سال ۲۰۱۴ منتشر شد و کم کم نسبت به نیاز توسعه دهندگان تکمیل شد و بعد ها از یک کتابخانه به یک فریمورک تبدیل شد.

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

 

تعریف: Vue.js 2

فریمورک vue 2.0 در سال ۲۰۱۵ منتشر شد اما نسخه ی اصلی آن که باعث محبوبیت آن شد نسخه ۲.۱ بود که در تاریخ ۲۲ نوامبر ۲۰۱۶ منتشر شد. فریمورک vue 2 جزو محبوب ترین فریمورک های زبان جاوا اسکریپت است. ویو جی اس از سادگی و انعطاف پذیری بالایی برخوردار است.

معماری vue js بصورت reactive و برپایه ی کامپوننت ها پیاده سازی شده است که هنگام استفاده از آن ui وب سایت به کامپوننت های قابل استفاده ی مجدد تقسیم بندی میشود.

 

تعریف: Vue.js 3

نسخه ی ۳ فریمورک vue.js نسخه ی کنونی این فریمورک است که برای طراحی وب اپلیکیشن های مدرن و کاربردی منتشر شده است. چندین پیشرفت و بهینه سازی نسبت به نسخه ی قبلی در آن انجام شده است. 

در نسخه ی ۳ ویو جی اس ، پرفرمنس بهتر شده ، حجم فریمورک کاهش پیدا کرده و پشتیبانی از TypeScript بهبود یافته است.

ویو ۳ در واقع Composition API است که روش ماژولارتر و منعطف تر جهت سازماندهی کامپوننت های ui وب سایت ارائه میدهد.

علاوه بر این ، ویو جی اس ۳ الگوریتم های DOM مجازی برای رندر کردن ، آپدیت کردن و نمایش نتیجه با سرعت و پرفرمنس بالاتری ارائه میدهد.

فریمورک vue 2 توسط بسیاری از شرکت ها هنوزم استفاده میشود ولی پشتیبانی از این نسخه در سال ۲۰۲۳ به اتمام خواهد رسید و پشتیبانی از vue نسخه ی ۳ خواهد بود.

 

آیا نسخه ی Vue 4 هم منتشر خواهد شد ؟ 

این نقول قول از گیتهاب ویو جی اس میباشد که توسط یکی از پشتیبانی های فریمورک vue در پاسخ به سوال کاربران منتشر شده است:
آیا نسخه ی ۴ برای ویو در نظر گرفته اید ؟ نه ! ما هنوز به این موضوع فکر نکردیم. ما مطمئنا درد مربوط به مهاجرت از نسخه ی ۲ به نسخه ی ۳ ویو را تکرار نخواهیم کرد. منبع 

پس احتمال اینکه نسخه ی ۴ برای ویو جی اس منتشر شد حالا حالاها منتفی است پس روی نسخه ی ۳ آن متمرکز شوید.

 

۱۱ تفاوت مهم بین vue.js 2 و vue.js 3 

حال که با هر دو نسخه ی فریمورک Vue گفتیم و با مزیت های این فریمورک بصورت اجمالی آشنا شدیم بهتر است تفاوت های فنی بین vue 2 و vue 3 را بررسی کنیم.

 

۱- نحوه ی ساخت اپ جدید

اولین تفاوت بین ویو جی اس ۲ و ویو جی اس ۳ نحوه ی ساختن اپلیکیشن جدید است. شما باید این کار را از راه استاندارد انجام بدهید که در Vue CLI معرفی شده است. ابتدا برای راحتی کار vue cli را با دستور زیر نصب کنید : 

npm i -g @vue/cli

• برای نصب کردن vue 2 باید دستور مقابل را وارد کنید : npm install vue@2.x.x
• برای نصب اخرین ورژن vue از نسخه های ۳ باید دستور مقابل را وارد کنید : npm install vue

چند تغییر جزئی نیز در سینتکس وجود دارد به کدهای زیر توجه کنید‌: 

مثال برای main.js در نسخه ی ۲ :‌

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = falsenew Vue({
render: h => h(App),
}).$mount('#app')

مثال برای main.js در نسخه ی ۳ :‌

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

 

۲- روت های چندگانه 

در نسخه ی ۲ ویو شما اجازه دارید تنها یک root داشته باشید که در نسخه ی ۳ اینطوری نیس و شما میتوانید چندین root داخل یک template تعریف کنید.

<template>
<app-header />
<router-view />
</template>

همانطور که در مثال بالا میبینید ما دو root داخل یک template داریم . این نوع کد در vue 2 رندر نمیشود. اگر شما در vue 2 چنین المانی را استفاده با خطا مواجه میشوید.

در کد زیر نیز میبینید دو کامپوننت وجود دارد یکی HelloWorld و دیگری AppForm : 

<script>
import HelloWorld from './components/HelloWorld.vue'
import AppForm from './components/AppForm.vue'

export default {
name: 'App',
components: {
HelloWorld,
AppForm
}
}
</script>

و در این صورت اگر کد بالا رندر شود نتیجه ی زیر به نمایش در می آید :‌

 

۳- معرفی Fragment در Vue 3 

همانطور که در بالا نیز اشاره کردیم در Vue 3 ما میتوانیم بیشتر از یک عدد root درون کامپوننت های خود داشته باشیم.

قبل از اینکه ما بخواهیم با Vue 2 یا Vue 3 متود های مختلفی ایجاد کنیم بهتر است ابتدا یک template و یک ساختار داده خوب پی ریزی کنیم.

در مثال زیر یک نود root بعنوان کامپوننت های فرم ایجاد کردیم. هم برای Vue2 و هم Vue3: 

کامپوننت های Form برای Vue2 : 

<template>
<div class="form-element">
<h2>{{ title }}</h2>
<input type="text" v-model="emp_username" placeholder="Employee Username"/>

<input type="password" v-model="emp_password" placeholder="Employee Password"/>

<button @click="login">Submit</button>
<p>Values: {{ emp_username + ' ' + emp_password }}</p>

</template>

کامپوننت های Form برای Vue3 : 

<template>
<h2>{{ state.title }}</h2>
<input type="text" v-model="state.empusername" placeholder="Employee Username" />

<input type="password" v-model="state.emppassword" placeholder="Employee Password" />

<button @click="login">Submit</button>
<p>Values: {{ state.empusername + ' ' + state.emppassword }}</p>

</template>

 

۴- تفاوت Data Property در Vue 2 و Vue 3 

حال وقت آن رسیده که روی اپ Vue خود data ست کنیم.

در مقایسه ی ویو جی اس ۲ با ویو جی اس ۳ ،‌ دو مورد Options API و Composition API مسئولیت هندل کردن دیتاها را دارند.

با کمک Options API برنامه نویسان وب میتوانند کدها را به قسمت های مختلف و تمیزی دسته بندی کنند مثل‌: data, computed properties, methods و  ... و اگر درباره ی Composition API صحبت میکنیم برعکس Options API اجازه میدهد توسعه دهنده ها کدها را توسط method دسته بندی کند تا نوع پراپرتی ها .

فرض کنیم ما در کامپوننت فرم خود دو عدد پراپرتی داریم :‌

emp.username و emp.password

در Vue2 توسط Composition API باید بصورت زیر باشد . ما دو عدد مقدار را در پراپرتی data داریم : 

<script>
export default {props: {
title: String,
},
data() {
return {
emp_username: "",
emp_password: "",
};
},
};
</script>

در Vue3 توسعه دهندگان باید با متود جدیدی به اسم setup() در Composition API کار کنند. علاوه بر این، توسعه‌دهندگان می‌توانند کنترل بیشتری روی آن چه که reactive است داشته باشند.

فرآیند ساختن دیتاهای reactive با استفاده از Composition API :

1. ایمپورت کردن reactive از vue
2. تعریف data توسط متود Ref()
3. متود Setup() وظیفه برگرداندن داده های reactive را دارد.

کد زیر را ببینید : 

<script>
import {reactive} from "vue";export default {
props: {
title: String,
},
setup() {
const state = reactive({
empusername: "",
emppassword: "",
});
return {state};
},
};
</script>

 

۵- متودها در veu 2 و vue 3

بعد از تعریف کردن data با استفاده از Composition API وقت آن رسیده یک setup متود برای vue خودمان داشته باشیم. بیایید ابتدا متود در vue 2 تعریف کنیم.

چطور در vue 2 یک متود ساخته میشود :‌

<script>
export default {
props: {
title: String,
},
data() {
return {
emp_username: "",
emp_password: "",
};
},methods:{
login() {
//login method goes here
},
};

چطور در Vue 3 یک متود ساخته میشود : 

بطور خلاصه در vue 3 متودها با استفاده از Composition API تعریف میشوند و درست مثل تعریف data ها هستند. 

<script>
import {reactive} from "vue";export default {
props: {
title: String,
},
setup() {
const state = reactive({
empusername: "",
emppassword: "",
});
const login = () => {
//login method goes here
};
return {
state,
login};
},
};
</script>

 

۶- چرخه ی حیات در vuejs 2 و vuejs 3 

در vue 2 توسعه دهنده میتوانند به hook های چرخه حیات بصورت مستقیم از طریق ویژگی های کامپوننت دسترسی داشته باشد :‌

<script>
export default {mounted() {
console.log("title: " +this.title);
},computed: {
lowerCaseEmp_Username(){
return this.emp_username.toLowerCase();
},
};
</script>

در vue 3 برای دسترسی به hook های چرخه ی حیات باید داخل متود setup یک متود دیگر به اسم onMounted بنویسید و از طریق آن به هوک ها دسترسی داشته باشید :

<script>
import {reactive} from "vue";export default {
props: {
title: String,
},
setup() {
const state = reactive({
empusername: "",
emppassword: "",
});
onMounted (() => {
console.log("component mounted");
});
const login = () => {
//login method goes here
};
return {
state,
login};
},
};
</script>

 

۷- نوشتن Computed Properties 

برای نوشتن computed properties یا پراپرتی های شرطی در vue 2 به سادگی و مشابه کد زیر انجام میگیرد . در مثال زیر ما عبارت Yes یا No را براساس شرط تعداد کتاب های نویسنده تعیین کردیم که اگر بالای صفر بود Yes در نظر گرفته شود و در غیر این صورت No : 

const publishedBooksMessage = computed(() => {
return author.books.length > 0 ? 'Yes' : 'No'
})

در نسخه ی ۳ ویو جی اس این مورد باید اجبارا توسط توسعه دهنده ایمپورت شود و یکی از مزیت های ویو ۳ نسبت به ویو ۲ هم این است که موارد غیرلازم برداشته شده تا باعث مشکلات دیگری نشود. برنامه نویس در صورت نیاز آنها را ایمپورت میکند.

پس در نسخه ی ۳ برای نوشتن computed properties باید آنرا ایمپورت کنید:

export default {
data() {
return {
author: {
name: 'Oliver Smith',
books: [
'Book 1',
'Book 2',
'Book 3'
]
}
}
},
computed: {
publishedBooksMessage() {
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
}<template>
<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>
</template>

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

از طرف دیگر اگر بخواهیم از Composition API استفاده کنیم کد به شکل زیر خواهد بود : 

<template>
<div>
<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>
</div>

</template>

<script setup>
import { reactive, computed } from "vue";

const author = reactive({
name: 'Oliver Smith',
books: [
'Book 1',
'Book 2',
'Book 3'
]
})

const publishedBooksMessage = computed(() => {
return author.books.length > 0 ? 'Yes' : 'No'
})

</script>

 

۸- دسترسی به prop ها

دسترسی به prop ها یکی از اساسی ترین تفاوت ها بین vue 2 و vue 3 میباشد.

در ویو جی اس نسخه ی ۲ ما باید به یک کامپوننت اشاره کنیم نه به یک پراپرتی خاص ، اگرچه در ظاهر بسیار آسان به نظر میرسد ولی در این صورت type support به یک درد تبدیل میشود.

بیایید یک مثال بنویسیم که title را درون هوک mounted چاپ کند‌ :

<script>
export default {
props: {
title: String,
}
mounted () {
console.log(“title: “ +this.title);
},
}

به هر حال ما دیگر در Vue 3 از این روش برای دسترسی به prop ها ، emit event ها و دریافت پراپرتی ها استفاده نخواهیم کرد.

در عوض ما متود setup را داریم که دو آرگومان قبول میکند:

1. props : دسترسی immutable به prop های کامپوننت
2. context : پراپرتی های انتخاب شده که vue 3 نمایش میدهد ( emit, slots, attrs )

نمونه کد با vue 3 :

export default{
props: {
Title: String,
},
setup(props) {
onMounted( () => {
console.log(“title: “ +props.title);
});

 

۹- Event ها در vue2 و vue3 

مشابه قبل ، event ها نیز در vue 2 بصورت مستقیم استفاده میشوند ولی با vue 3 شما کنترل بیشتری به دسترسی ها مخصوصا روی پراپرتی ها و متود ها دارید.

بیایید فرض کنیم ما یک event به نام login داریم که موقع زده شدن دکمه ی submit قراره emit کنیم.

در vue 2 ما فقط this.$emit را صدا میزنیم و داده ها را پاس میدهیم : 

methods:{
login() {
this.$emit("login", {
username: this.emp_username,
password: this.emp_password,
});
},

حال میدانیم که این کدها در vue 3 معنی ندارد و ما باید به روش دیگری با کامپوننت های والد رفتار کنیم.

کاری که باید در vue 3 انجام بدهیم این است که متود setup را استفاده کنیم و context را بعنوان پارامتر دوم ارسال کنیم و سپس emit را صدا بزنیم تا event های خودمان را بفرستیم و مثل قبل متود مربوط به emit دو پارامتر خواهد داشت : 

1. نام emit .
2. آبجکتی که باید داده ها را پاس کند.

کد زیر را ببینید :‌

setup (props, {emit}) {
const login = () => {
emit (“login”, {
username: state.username,
password: state.password,
});
};

 

۱۰- معرفی عملکرد portal در vue 3

ویژگی portal به شما اجازه میدهد یک تکه کد از یک کامپوننت را در کامپوننت های دیگر در درخت DOM دیگری رندر کنید. در نسخه ی ۲ ویو جی اس یک کتابخانه ی جانبی بود به اسم portal-vue که مشابه همین کار را انجام میداد ولی اکنون این ویژگی بصورت درونی در vue 3 گنجانده شده است.

در vue3 ما یک تگ به نام <Teleport> خواهیم داشت  و هر کدی که درون آن قرار گرفته باشد آماده ی تله پورت شدن میباشد. همچنین تگ teleport یک آرگومان قبول میکند.

بیایید یک مثال از تله پورت vuejs را ببینیم : 

<Teleport to="#modal-layer">

<div class="modal">

Hey, Everyone!!!

</div>

</Teleport>

Any code inside <Portal></Portal> will be displayed in the target location mentioned.

<div id="modal-target"></div>

 

۱۱- متود createApp در Vue3

یکی دیگر از تفاوت های بین Vue2 و Vue3 متود ساختن اپلیکیشن جدید یا همان createApp است.این متود یک instance جدید از اپ vue برمیگرداند. هر instance ساخته شده میتواند عملکرد خود را بدون دخالت در دیگر instance ها داشته باشد. کد : 

const app1 = createApp({})
const app2 = createApp({})
app1.directive('focus', {
inserted: el => el.focus()
})
app2.mixin({
/* ... */
})

ساختن چندین root در یک اپلیکیشن واحد زیاد مرسوم نیست ولی بلاخره شاید در پروژه های بزرگ نیاز باشد. در Vue3 برخلاف Vue2 شما میتوانید هر اپ را بعنوان یک آبجکت مستقل درون یک پروژه داشته باشید و همچنین عملکرد های هر آبجکت را میتوانید بین دیگر instance ها به اشتراک بگذارید.

 

مهمترین مزیت های Vue3 نسبت به Vue2 چیست ؟‌

نسخه ی ۳ ویو جی اس با بهبودی ها و مزیت های زیادی نسبت به Vue 2 بوده است که مهم ترین آنها در زیر آمده است :

 

• Composition API که در ویو جی اس ۳ برای بهبود سازماندهی کامپوننت ها ارائه شده است.
  
  
• پرفرمنس بهتر
  
  
• حجم کمتر
  
  
• پشتیبانی بهتر از TypeScript
  
  
• کنترل آسان خطاها و دیباگ کردن 
  
  
• کارکرد بهتر با vue router و vuex

 

نتیجه گیری :‌

در کل vue 2 و vue 3 از نظر سینتکس مشابه هم هستند و کسی که یکی از این ها را یاد بگیرد با دیگری نیز میتواند کار کند ولی vue 3 بهبود ها و امکانات جدیدی داشته که در vue 2 وجود نداشت. سرعت بهتر شده و پرفرمنس عالی تری را ارائه میدهد.