سلام Vue!

سلام ..
قراره یه مرور کلی داشته باشیم روی اینکه vue چی هست و عمو ایوان عزیز چه فیچرایی در اختیارمون قرار داده.

درمورد چیا قراره صحبت کنیم؟
ساختار Modular , ‏Binding , ‏List Rendering , ‏Conditional Rendering , ‏Props , ‏Event handling , ‏Routers , ‏Vuex

قبل از شروع بگم :
- این مقاله بیشتر برای شما مناسبه، اگه تازه میخواید وارد دنیای vue بشید و آشناییت حداقلی از CSS , HTML و JS دارید.

2013 بود که آقای ایوان یو (کارمند سابق google) تصمیم میگیره فریموورک خودش رو بیاره بالا. با نظر به اینکه یه فریموورکی ساخته بشه که ویژگی های انگولار (یکی از فریموورک های js) رو داشته باشه و به مراتب سبک تر باشه.
این شد که فوریه 2014 اولین نسخه از فریموورک Vue.js منتشر شد.

فریموورک Vue.js یه فریموورک خیلی راحت و سبکه که خیلی سریع میشه باهاش ارتباط گرفت و وارد مسیرش شد.
داکیومنت خیلی خوب و روونی داره که همه چیز ساده و تمیز گفته شده و این باعث میشه یه فرد تازه کار بتونه یادگیری رو راحت از reference بره جلو.
درمورد مزایا و معایب این دلبر جلوتر صحبت می کنیم.

قابلیت های Vue.js و مقایسه با پیاده سازی ساده (css, html, js) :

ساختار Modular :
یکی از مواردی که vue خیلی خوب روش کار کرده ساختار ماژولاره. ساختاری که این امکان رو بهمون میده که بخش های مختلف یک صفحه رو به قسمت های مجزا تقسیم کنیم و هرکدوم رو در قالب یک "component" پیاده سازی کنیم. component ها به شکل "vue." ذخیره میشن.
(ناگفته نمونه هر چیزی که تو یک صفحه می بینید داخل یک component پیاده شده)
هر component سه بخش html ، css و js رو تو خودش داره که میتونیم مجزا پیادش کنیم.
این خاصیت باعث میشه علاوه بر سبک تر شدن کدمون، بتونیم هر component رو تو صفحات دیگه هم استفاده کنیم (یه بار می نویسیم چندبار استفاده می کنیم).
(پیشنهاد: مطالعه atomic design خیلی می تونه تو این زمینه کمک کننده باشه)
در نظر بگیرید برای پیاده سازی یک صفحه با javaScript خام مجبورید هر صفحه ی وبسایت رو کامل کد نویسی کنید. هم پیاده سازی زمانبرتره هم دیباگ سخت تر.

هر component اینجور شکلی داره :

‏Binding :
زمانی که از jquery یا javaScript خام استفاده می کنیم، برای set کردن یا get کردن دیتا ها از html، برای هر element باید یه class یا id تعریف کنیم ودیتا رو از js تغییرش بدیم.
این روند تو vue خیلی راحت تر و خلاصه تر شده. دیگه نیاز نیست برای دسترسی به دیتای یک المنت از id یا class المنت استفاده کنیم. هر المنت (یا هر component) یک سری اتریبیوت داره که می تونه قابل تغییر باشه (برای مثال، input اتریبیوت value رو داره)، با انتساب (یا bind کردن) یک متغیر به یک اتریبیوت می تونیم دیتامون رو از js تغییر بدیم.
به این فرآیند که بسیار هم تو پروژه ازش استفاده میشه میگن binding.
یه نکته فوق العاده مفید که در مورد binding وجود داره، اینه که هر زمان مقدار متغیر از js تغییر کرد المنت داخل html هم آپدیت میشه (خاصیت reactive) ، بدون هیچ کاراضافه ای.
تو کد ببینیم:

‏List Rendering :
همون طور که از اسم مشخصه قراره یه لیست برامون render بشه.
به طور معمول زمانی که از jquery یا javaScript خام استفاده می کنیم، برای ایجاد لیستی از آیتم ها میایم تو js، آیتم خودمون رو string می نویسیم و append می کنیم به div والد. یا از innerHTML استفاده می کنیم که تو jquery فانکشن html رو هم داریم.
vue پیاده سازی لیست رو خیلی شیک اومده هندل کرده. یه خصیصه داریم به نام v-for که تو html داخل آیتمی که می خوایم لیست بشه قرار میگیره. لیست داده هامونم (که عموما یه آرایه هست) می گیره و آیتما رو برامون رندر میکنه.
رو کد بهتر متوجه می شید:

تو این مثال ما لیستمون رو از متغیر list می گیریم و رندر می کنیم.

‏Conditional Rendering :
قطعا پیش میاد مواقعی که نیاز داشته باشیم در حالات خاصی یه المنت رو نمایش بدیم یا ندیم. در حالت معمول چی کار می کنیم؟ باز باید از id یا class المنت استفاده کنیم و اتریبیوت display برای استایل المنت رو none قرار بدیم. یا از یه کلاس مجزا استفاده کنیم که مقدار display، داخلش none تنظیم شده و روی المنتمون set کنیم. که باز مجبوریم به id ، class یا اسم تگ دسترسی داشته باشیم.
vue این کار رو خیلی راحت کرده. از یه خصیصه ی دیگه ای استفاده می کنه که با انتساب یک متغیر boolean بهش (همون binding) میشه به راحتی این کار رو انجام داد. با این کار رندر شدن یک المنت رو شرطی می کنیم.
کد رو ببینیم:

‏Props :
در مورد component ها صحبت کردیم که چی هستن و چیکار می کنن. زمانی که ما یه component می نویسیم میتونیم یه سری دسترسی براش تعریف کنیم. از جمله ی این دسترسی ها استفاده از "prop" هست.
کارش چیه؟ هر موقع که از یه component استفاده می کنیم، ممکنه بخوایم از parent، دیتاهایی به اون component ارسال بشن. اینجاست که prop ها میان وسط. باز با bind کردن متغیر به یه prop می تونیم دیتا رو بفرستیم.
(و همون طور که از binding می دونیم، با تغییر داده تو parent، مقدار داخل component هم آپدیت میشه)
بریم رو کد:

‏Event handling :
event ها معمولا تو همه ی پروژه ها استفاده میشن، vue این مورد رو هم خیلی خوب و خلاصه پیادش کرده.
برای اختصاص یک event به المنت باز میومدیم از id و class المنت استفاده می کردیم. تو javaScript از متدی استفاده می کردیم به نام addEventListener که نوع event و listener رو براش مشخص می کردیم. jquery اومد یخورده کار رو واحت کرد و به ازای هر event یه فانکشن مجزا در ختیارمون قرار داد.
vue از این هم کار رو راحت تر کرده. یه متد تعریف می کنیم به عنوان listener که میتونیم به هر المنت که خواستیم انتسابش بدیم. انتساب توی html و با '@' انجام میشه.
به طور کلی تو هر vue component ، تو قسمت html دیدید داره از '@' استفاده میشه، یه event داره هندل میشه.
یه کاری که vue برای handling ها خیلی تمیز انجامش داده، set کردن stopPropagation و preventDefault هاست. حتی می تونید خیلی راحت برای event موس و کیبورد هم حالات خاص تعریف کنید. اینکه اگه چه کلیدی انتخاب شد چه کاری انجام بده. زیباست نه؟ :)
رو کد زیباتر هم میشه:

تو این مثال میگیم اگه فقط رو دکمه کلیک شد فانکشن رو اجرا کن و کلیک روی div رو در نظر نگیر.

‏Routers :
هر وبسایتی که پیاده می کنیم اغلب شامل صفحات مختلفه که با یه لینک به یک صفحه پیوند میشن.
تو vue برای این کار از یک پکیج مجزا استفاده میشه که بهش میگن : Vue Router
حالا کارش چیه؟ از اونجایی که vue یک محیط SPA (توضیحش رو در ادامه میدم اگه نمی دونید) براتون ایجاد می کنه نیازه که صفحات هم به شکل SPA تغییر کنن.
برای هر صفحه یه route جدید ایجاد میشه و بهش اختصاص پیدا می کنه که شامل URL صفحه و یه سری مقادیر دیگه هست. Vue Router خیلی شیک میاد صفحات رو عوض می کنه، بدون reload صفحه.
یه نمونه استفاده ازش رو ببینیم:

دوتا route تعریف کردیم و داخل component به about سوییچ کردیم.

‏router-link : برای جابجایی بین صفحات استفاده میشه ، بدون reload صفحه

(در حقیقت بعد از build پروژه، ‏router-link با <a> جایگزین میشه)

‏Vuex :
به طور عادی هروقت بخوایم مقادیری رو تو وبسایتمون ذخیره داشته باشیم از Cookie ، Local Storage و گهگاهی هم Session استفاده می کنیم. تو vue هم میشه از اینا استفاده کرد، به اضافه ی یه مورد خیلی کاربردی دیگه.
یک پکیج داریم به نام Vuex.
Vuex یه State Management هست که همونطور که اسمش گواهه، مدیریت state های وبسایت رو به عهده داره. state چیه؟ گاهی مواقع نیازی داریم دیتاهایی بین صفحات یا component هامون share کنیم که از همه جا قابل دسترسی و تغییر باشن. به این دیتاها میگن state.
یکی از ویژگی های فوق العاده ی Vuex، خاصیت reactive بودنه. یعنی چی؟ یعنی هر زمان که داده تو store تغییر کرد html شما هم آپدیت میشه. بدون reload صفحه. خاصیتی که در Local Storage و Cookie وجود نداره.
در مورد Vuex تا همینجا بسنده می کنم، چون توضیحش مفصله.
یه مثال کوتاه ازش ببینیم:

یه state تعریف کردیم به نام value. براش mutation (تابع setter) تعریف کردیم، داخل component مقدار رو از input گرفتیم و داخل store ذخیره کردیم.

خب، حالا چه مزیتایی داره؟

تا اینجا که هر چی در مورد این دلبر گفتم مزیت بوده و بس :)
چند مورد دیگه هم اضافه کنم :

‏- SPA :
vue ساختار SPA داره. حالا SPA چیه؟ Single Page Application یا برنامه های تک صفحه ای.
پیش تر هم گفتم که با تغییر صفحات، صفحه reload نمیشه. انگار شما یک صفحه دارین که همیشه تو همون صفحه محتوا تغییر می کنن.
این قابلیت از اونجایی که سرعت load صفحات رو افزایش میده به شدت performance و استفاده از سایت رو بهتر و روون تر می کنه.

‏- Easy and fast develop :
توسعه سریع و راحت. همونطور که توضیح دادم vue انجام خیلی از کارا رو راحت کرده و از اونجایی که بسیار فریموورک سبُک و انعطاف پذیریه، خیلی راحت میشه یادش گرفت، باهاش کار کرد و حتی باهاش حرف زد :)

‏- Document :
از بین تمامی داکیومنت هایی که تا حالا خوندم vue یکی از بهترین ها بود. مطالب خیلی خلاصه و روون گفته شده و حتی اگه آشناییت مختصر هم با زبان انگیسی داشته باشید (مگه میشه برنامه نویس انگلیسی ندونه /:) ، می تونید خیلی راحت لذت داکیومنت خونی از reference رو تجربه کنید.

‏- Community :
یه زمانی این شاخص به عنوان یکی از معایب vue گفته می شد.
از اونجایی که vue توسط یه کمپانی معتبر معرفی نشد، نسبت به React و Angular جامعه ی کمتری از برنامه نویسا درموردش صحبت می کردن، اما اونقدر تو چندسال اخیر خوب کار کرد که هم پرسش و پاسخ های خیلی زیادی درموردش شده، هم ابزارها و پکیج های خیلی مفیدی براش ارائه شده و هم خودش بستری شده برای یه فریموورک دیگه به نام Nuxt.js.

چه معایبی داره؟

زمانی که vue 2 منتشر شد جای کار خیلی داشت، و طبیعی هم بود. اما vue 3 تا الان که تقریبا 7 ماه از اومدنش میگذره، از حق نگذریم فوق العاده کار کرده و خیلی چیزا رو بهبود داده. (حتی به نظرم syntax بسیار مناسب تر و تمیزتری هم نسبت به React و Angular داره)
اما چیزی که می مونه :

‏- SEO :
گفتیم که vue ساختار SPA داره که امتیاز خیلی خوبیه. ولی کجا همین امتیاز ممکنه به عیب تبدیل بشه؟
ساختار SPA به این معناست که کل HTML سمت مرورگر پیاده میشه و از سمت سرور، شما HTML دریافت نمی کنید (اصطلاحا به این نوع ساختار HTML، میگن Virtual DOM). به همین دلیل در حالت عادی، Indexing خزنده های گوگل به چیز به درد بخوری نمیرسه و این یعنی بدرود SEO.
البته راه چاره براش هست. یه فرآیند داریم به نام SSR که خلاصه بخوام بگم HTML سمت سرور رندر میشه و برا مرورگر ارسال میشه.
یا استفاده از meta tag ها که می تونن SEO رو بهبود بدن.

‏vue فیچرای ریز و درشت زیاد داره که بعضیاشون کمتر مورد استفاده قرار می گیرن و بعضیاشونم تو سطوح پیشرفته استفاده میشن.
تو این مطلب سعی کردم خلاصه وار مواردی که کاربرد و اهمیت بیشتری دارن رو توضیح بدم.

خوشحال میشم نظراتتون رو بدونم
ممنون که تا انتها با من بودید .. روز و شبتون خوش