Vue.js چیست؟ بررسی کامل فریمورک

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

Vue.js چیست؟

Vue یک فریمورک جاوا اسکریپت برای ساخت رابط کاربری است. از زمان انتشار اولیه آن در سال 2014، به یکی از محبوب ترین فریمورک های جاوا اسکریپت تبدیل شده است: این ششمین تکنولوژی رایج وب بود که توسط پاسخ دهندگان در نظرسنجی توسعه دهندگان Stack Overflow در سال 2022 استفاده می شد و در آن زمان ستاره دارترین فریمورک جاوا اسکریپت در GitHub بود.

دو ویژگی اصلی ویو رندر اعلامی و واکنش پذیری است. Vue به شما امکان می دهد DOM رندر شده را بر اساس وضعیت کامپوننت با استفاده از یک قالب مبتنی بر HTML توصیف کنید. سیستم واکنش پذیری آن به طور خودکار دسترسی به ویژگی و جهش اشیاء واکنش پذیر را ردیابی می کند و DOM را در طول تغییرات حالت به طور موثر به روز می کند.

علاوه بر این، مهم است که بدانید Vue دو API دارد: Options API و Composition API .مورد اولی Options API  به شما امکان می دهد منطق یک کامپوننت را با اعلام یک شی از گزینه ها تعریف کنید. Composition API به شما امکان می دهد منطق کامپوننت را با استفاده از توابع API تعریف کنید و  نوشتن state با ترکیب چندین تابع.

یک مثال ساده

در زیر نمونه ای از یک کامپوننت اصلی شمارنده نوشته شده با Options API آورده شده است.

<script>
    export default {
        data() {
            return {
                count: 0
            }
        }
    }
</script>

<template>
    <p>
        The count is: <span class="count">{{ count }}</span>
    </p>
    <button v-on:click="count--" v-bind:disabled="count === 0">Decrement</button>
    <button v-on:click="count++">Increment</button>
</template>

<style scoped>
.count {
    font-style: bold;
    color: firebrick;
}
</style>

این مثال چند ویژگی دیگر Vue را نشان می‌دهد: قالب تک فایل، واکنش‌پذیری، سینتکس قالب، و مدیریت رویداد.در بخش های زیر به طور مختصر به بررسی این ویژگی ها و کد می پردازیم.

کامپوننت تک فایلی

یک کامپوننت تک فایل (SFC) یک فرمت فایل است که به شما امکان می دهد از یک فایل برای تعریف منطق جاوا اسکریپت، قالب HTML و استایل های CSS در یک کامپوننت Vue استفاده کنید. SFC ها پسوند فایل vue. دارند و توسط فریمورک به جاوا اسکریپت و CSS کامپایل می شوند.

بلوک <script> جایی است که  کامپوننت تعریف می شود. این مثال از Options API استفاده می کند، بنابراین <script> وضعیت واکنشی کامپوننت را با آپشن data تعریف می کند. در این حالت، یک ویژگی count با 0 به عنوان مقدار اولیه تعریف می شود.

بلوک <template> برای اعلام نمای کامپوننت با استفاده از سینتکس HTML  استفاده می شود. این سینتکس الگو در ادامه بیشتر مورد بررسی قرار خواهد گرفت.

در نهایت، بلوک <style> شامل سبک های یک کامپوننت  است. این مثال یک کلاس count. را اعلام می کند که توسط عنصر <span> در بلوک <template> استفاده می شود. همچنین توجه داشته باشید که ویژگی scoped در تگ <style> وجود دارد، که به شما امکان می‌دهد سبک‌ها را تنها با اعمال آن‌ها در کامپوننت فعلی، بیشتر محصور کنید.

سینکس  قالب ، واکنش پذیری و مدیریت رویداد

سینکس که برای تعریف قالب ها در Vue استفاده می شود،مبتنی بر HTML است و از نظر سینکس معتبر است. در مثال بالا، قالب از عناصر و ویژگی های معمولی HTML، جاوا اسکریپت و CSS استفاده می کند.

با این حال، ممکن است متوجه ویژگی هایی شده باشید که با v-bind: و v-on: شروع می شوند. اینها ویژگی‌های Vue ویژه‌ای هستند که دستورالعمل‌ها نامیده می‌شوند و دو نقطه از نظر معنایی برای نام ویژگی‌ها معتبر است.

دستورالعمل v-on به شما امکان می دهد زمانی که یک رویداد DOM راه اندازی می شود، کدی را اجرا کنید. در این حالت، هر زمان که یکی از دکمه‌ها یک رویداد onclick را اجرا کند، شمارش افزایش یا کاهش می‌یابد. v-bind ویژگی یک عنصر را به عبارت جاوا اسکریپت متصل می کند. کاهش <button> دارای ویژگی disabled است اگر count === 0 باشد.

می‌توانید با استفاده از بریس‌های دوتایی، متن را در قالب‌ها درون‌یابی کنید. در این مثال، مقدار count state در <span> درون یابی می شود. سینکس  پرانتز دوتایی نیز داده ها را متصل می کند: هر زمان که count افزایش یا کاهش یابد، HTML ارائه شده تغییر می کند.

مزایای Vue.js

Vue به دلیل مزایای زیادی که دارد محبوبیت پیدا کرده است. به ویژه، یادگیری آن آسان، کارآمد، سبک و انعطاف پذیر است.

آسان برای یادگیری

از آنجایی که Vue بر روی HTML، CSS و جاوا اسکریپت استاندارد ساخته شده است، انتخاب آن آسان تر از سایر فریمورک های جاوا اسکریپت است که شما را ملزم به یادگیری سینکس  و زبان های نشانه گذاری اضافی، مانند JSX و Typescript می کند. علاوه بر این، اسناد رسمی جامع و سایر منابع یادگیری شروع یادگیری را آسان می کند.

Vue طوری طراحی شده است که کارآمد و سریع باشد. از یک DOM مجازی برای ارائه کارآمد نود ها استفاده می کند و بهینه سازی هایی را برای بهبود عملکرد در زمان اجرا انجام می دهد.

در مقایسه با Angular و React، دو فریمورک محبوب جاوا اسکریپت دیگر، Vue به طور کلی عملکرد بهتری دارد.

سبک وزن

Vue از همان ابتدا به گونه‌ای ساخته شد که سبک وزن باشد: در مصاحبه‌ای با Between the Wires، خالق Vue اوان یو گفت: «تصمیم گرفتم، چه می‌شد اگر بتوانم بخشی را که واقعاً در مورد Angular دوست داشتم استخراج کنم و چیزی واقعاً سبک وزن بسازم بدون همه چیز و مفاهیم اضافی درگیر است؟» Vue سبک وزن است، با حجم فایل تقریباً 58 کیلوبایت برای نسخه گلوبال کوچک شده نسخه 3.2.

قابل انعطاف

Vue یک فریمورک بسیار انعطاف پذیر است که برای پروژه های مختلف مناسب است. می توانید از آن برای ساخت اپلیکیشن های تک صفحه ای، کامپوننت های وب، SSG و حتی برنامه های دسکتاپ و موبایل استفاده کنید. این "به صورت تدریجی قابل پذیرش است"، به این معنی که می توانید به راحتی از فریمورک برای نیازهای برنامه خود استفاده کرده و گسترش دهید.

معایب Vue.js

در حالی که Vue دارای مزایای بسیاری است، قبل از شروع استفاده از آن چند اشکال دارد که باید در نظر بگیرید.

انجمن ها

Vue نسبت به سایر فریمورک های محبوب مانند Angular و React از پشتیبانی جامعه کمتری برخوردار است.

به عنوان مثال، در زمان انتشار این پست، جستجوی Stack Overflow برای سوالات برچسب گذاری شده با Vue حدود 100000 سوال به دست می دهد. جستجوی Angular در 290000 سوال و جستجوی React 437000 سوال را نشان می دهد. علاوه بر این، Vue subreddit دارای 90000 عضو است، در حالی که Subreddit React دارای 331000 عضو است.

کتابخانه ها

Vue کتابخانه های شخص ثالث کمتری نسبت به سایر فریمورک های محبوب دارد، به این معنی که ممکن است راه حلی برای استفاده خاص شما در Vue وجود نداشته باشد. جستجوی NPM تقریباً 35000 بسته با کلمه کلیدی "Vue" برچسب گذاری شده است، در حالی که 97000 بسته دارای برچسب "React" هستند.

فرصت های شغلی

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

به گفتهEnlyft ویو سهم بازار کمتری دارد: حدود 14500 شرکت با Vue می‌سازند، در حالی که 235000 شرکت از Angular و React استفاده می‌کنند. علاوه بر این، در گزارش ژوئن 2022 Hacker News Hiring Trends که 25.5 درصد از پست های شغلی مربوط به React بود، در حالی که تنها 3.5 درصد مربوط به Vue بود.

در ایران نیز بعض شرکت ها افرادی که به Vue مسلط هستند را استخدام می کنند.

بهترین منابع برای یادگیری Vue.js

منابع رایگان و پولی زیادی وجود دارد که به شما در شروع یادگیری Vue کمک می کند.

بهترین مکان برای شروع یادگیری Vue، مستندات رسمی Vue است. مستندات Vue یک راهنمای جامع برای موارد ضروری فریمورک است و به موضوعات پیچیده تر و بهترین شیوه ها می پردازد.

اگر دوست دارید با آموزش‌ها یاد بگیرید، می‌توانید آموزش رسمی Vue یا آموزش کوتاه MDN Vue را مرور کنید. برای دوره های ویدیویی با کیفیت بالا، رایگان و پولی، Vue Mastery، Vue School و Vue.js Developers را در نظر بگیرید.

اگر محتوای نوشتاری را ترجیح می دهید، Dev Community، CSS-Tricks، وبلاگ LogRocket و Smashing Magazine پست های وبلاگ Vue و آموزش های زیادی دارند.

ما در آنوفل ( Anophel ) نیز محتوای نوشتاری برای Vue.jsداریم و دوره های آموزشی با کیفیت بالا .

در نهایت، Vue یک انجمن Discord فعال و بسیاری از رویدادهای حضوری و از راه دور دارد.

آموزش هایی برای کمک به استفاده از Vue.js در آنوفل

میخواهی داستان شروع Vue.js را با ما شروع کنی؟ آنوفل آموزش های بسیار خوبی دارد که به شما کمک می کند برنامه های Vue خود بسازید.

نتیجه

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

به طور کلی، Vue یک چارچوب عالی برای ساخت انواع بسیاری از برنامه‌ها است و منابع بسیار خوبی برای شروع یادگیری و ایجاد با آن وجود دارد.