Vue.js برای مبتدیان: چرا این فریم‌ورک هنوز ساده‌ترین نقطهٔ شروع است؟ | آموزش Vue.js

Vue.js برای مبتدیان اغلب نقطهٔ شروع سبک‌تری نسبت به React یا Angular است؛ در تجربه‌ام وقتی تازه‌کاری می‌خواهد اولین رابط کاربری تعاملی خودش را بسازد، Vue با مدل ذهنی ساده‌تر و منحنی یادگیری ملایم‌تر، او را سریع‌تر به نتیجه می‌رساند. Vue یک فریم‌ورک جاوااسکریپتی پیش‌رونده (Progressive) است؛ یعنی می‌توانید ابتدا آن را روی یک بخش کوچک از یک صفحهٔ موجود سوار کنید و بعداً یک اپلیکیشن کامل مبتنی بر کامپوننت با آن بسازید.

چرا Vue برای مبتدی‌ها جذاب است؟

سه دلیل عملی که در پروژه‌های واقعی حس می‌کنم: اول، نحو (syntax) ساده‌ای دارد که در یک فایل HTML معمولی هم کار می‌کند. دوم، مستندات رسمی آن از پخته‌ترین مستندات در اکوسیستم جاوااسکریپت است. سوم، برای شروع به ابزارهای سنگین نیازی نیست؛ می‌توانید با یک فایل HTML و یک <script> ساده شروع کنید.

این ویژگی‌ها باعث می‌شود کسی که تازه با جاوااسکریپت از صفر شروع کرده، بدون درگیر شدن با ابزارهای build، پکیج‌منیجرها و پیکربندی‌های پیچیده، از روز اول چیز مفیدی بسازد. Angular — که چارچوب سخت‌گیرانهٔ سازمانی دارد — برای تازه‌کارها مناسب‌تر نیست.

یادگیری Vue، بر خلاف یادگیری React، شما را مجبور نمی‌کند همزمان با فریم‌ورک، پنج ابزار جانبی را هم یاد بگیرید.

پیش‌نیازها قبل از شروع Vue

پیش از شروع Vue، سه چیز باید در سطح پایه تسلط داشته باشید: HTML (به‌ویژه ساختار معنایی، فرم‌ها و جدول‌ها)، CSS (به‌اندازهٔ کافی برای چیدن چیدمان‌های ساده) و جاوااسکریپت. اگر با زبان‌های با تایپ ایستا راحت هستید، یادگیری تایپ‌اسکریپت از صفر هم کمک بزرگی است، چون اکوسیستم مدرن Vue 3 به‌طور کامل با TypeScript کار می‌کند.

اگر مفاهیم پایهٔ جاوااسکریپت را تازه شروع کرده‌اید، حتماً روی توابع بسته (closure)، آرایه‌ها با متدهای متدهای آرایه در جاوااسکریپت، و مدیریت خطا با async/await در جاوااسکریپت کار کنید. بدون این پایه‌ها، Vue به یک جعبهٔ جادویی تبدیل می‌شود که کار می‌کند اما نمی‌دانید چرا.

راه‌اندازی سبک، بدون وابستگی به ابزار سنگین

ساده‌ترین راه شروع Vue، استفاده از CDN است. این روش برای یادگیری، تست کردن یا پروژه‌های یک‌صفحه‌ای کافی است. نمونهٔ حداقلی:

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="message = 'سلام دنیا'">کلیک کن</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
  const { createApp, ref } = Vue;
  createApp({
    setup() {
      const message = ref("'سلام'");
      return { message };
    }
  }).mount("#app");
</script>

برای پروژه‌های جدی‌تر، ابزار رسمی create-vue را با Vite اجرا می‌کنید. اگر با محیط‌های ابزارمحور غریبه‌اید، همان‌طور که در «فرانت‌اند چیست و چگونه کار می‌کند» توضیح داده‌ام، مسیر فریم‌ورک‌ها تنها یک مسیر از میان چند مسیر ممکن است.

اولین اپلیکیشن: واکنش‌گرایی (Reactivity) در عمل

مفهوم بنیادی Vue، واکنش‌گرایی است. یعنی وقتی داده‌ای تغییر می‌کند، خود Vue تشخیص می‌دهد کدام بخش از رابط کاربری باید دوباره رندر شود. تازه‌کارها اغلب این ویژگی را دست‌کم می‌گیرند و مستقیماً DOM را دست‌کاری می‌کنند — روشی که در کار با DOM در جاوااسکریپت با آن آشنا می‌شوید ولی در Vue دیگر لزومی به استفاده از آن ندارید.

در Vue 3 دو روش اصلی برای تعریف داده‌های واکنشی وجود دارد: ref() برای مقادیر اولیه (primitive) و reactive() برای اشیاء. تفاوت این دو در جزئیات مهم است؛ وقتی با یک شیء کار می‌کنید، reactive() راحت‌تر است، اما برای رشته‌ها و اعداد، ref() انتخاب صحیح است.

دایرکتیوها و مدل داده

دایرکتیوها ویژگی‌های خاص HTML هستند که با پیشوند v- شروع می‌شوند و رفتار Vue را فعال می‌کنند. مهم‌ترین‌ها:

دایرکتیو	کاربرد
`v-if`	شرطی رندر کردن یک بخش
`v-for`	تکرار روی آرایه یا شیء
`v-bind`	اتصال واکنشی به attributes
`v-on` / `@`	گوش دادن به رخدادها
`v-model`	اتصال دوطرفه به فرم

درک v-model برای تازه‌کارها حیاتی است، چون هم در فرم‌های ساده و هم در فرم‌های پیچیده به‌کار می‌آید. اگر می‌خواهید بعداً اپ‌های خود را به بک‌اند وصل کنید، آشنایی با مفهوم API و REST API لازم می‌شود.

Vue شما را از نوشتن کد واکنش‌گرای دستی نجات می‌دهد؛ اما اگر مدل داده را درست طراحی نکنید، هیچ فریم‌ورکی نمی‌تواند نجاتتان دهد.

کامپوننت‌ها: قلب Vue

کامپوننت، واحد بنیادی ساخت رابط کاربری در Vue است. هر کامپوننت می‌تواند شامل بخش قالب (template)، منطق (script) و استایل (style) باشد. دو سبک برای تعریف کامپوننت وجود دارد: گزینه‌محور (Options API) که ساده‌تر است و ترکیبی (Composition API) که انعطاف‌پذیرتر و برای پروژه‌های بزرگ مناسب‌تر است. تازه‌کارها معمولاً با Options API راحت‌تر شروع می‌کنند و بعد از تسلط به Composition می‌روند.

ارتباط بین کامپوننت‌ها از طریق props (والد به فرزند) و رویدادهای سفارشی (فرزند به والد) انجام می‌شود. برای ارتباط در مقیاس بزرگ‌تر، به مدیریت وضعیت نیاز پیدا می‌کنید.

مدیریت وضعیت در مقیاس کوچک

برای اپلیکیشن‌های کوچک، نیازی به Pinia یا Vuex ندارید. یک فایل جاوااسکریپت ساده که یک شیء reactive صادر می‌کند، کافی است:

// store.js
import { reactive } from "vue";
export const store = reactive({
  user: null,
  cart: []
});

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

اشتباهات رایج تازه‌کارها در Vue

دست‌کاری مستقیم DOM در کنار Vue — این کار مدل واکنش‌گرایی را می‌شکند. اگر مجبورید به DOM دسترسی بگیرید، از template ref استفاده کنید.
تعریف کامپوننت به‌صورت global برای همه‌چیز — کامپوننت‌های global، حجم باندل را بالا می‌برند. آنها را در جای دقیق خود ثبت کنید.
خواندن مقدار ref بدون .value — خطای رایجی که اغلب تازه‌کارها با آن درگیر می‌شوند.
نادیده گرفتن مدیریت وضعیت — تا وقتی تعداد کامپوننت‌ها کم است مشکلی پیش نمی‌آید، اما بعد از مدتی کد شما به هم می‌ریزد.
نادیده گرفتن TypeScript — اگرچه برای پروژه‌های کوچک اختیاری است، در پروژه‌های جدی کمک شایانی می‌کند.

پرسش‌های پرتکرار درباره Vue.js

آیا Vue برای پروژه‌های بزرگ مناسب است؟ بله؛ شرکت‌هایی مثل GitLab، Behance و Alibaba در بخش‌هایی از پروژه‌های خود از Vue استفاده می‌کنند. برای پروژه‌های سازمانی بزرگ، ترکیب Composition API به‌همراه Pinia و TypeScript، Vue را به یک انتخاب حرفه‌ای تبدیل می‌کند.

آیا باید Vue 2 یا Vue 3 را یاد بگیرم؟ قطعاً Vue 3. نسخهٔ دوم از دسامبر ۲۰۲۳ به پایان پشتیبانی رسیده است و در نسخهٔ سوم تغییرات بنیادینی در نحوهٔ نوشتن کد رخ داده که در مقالهٔ Vue 3 چه تغییراتی دارد؟ به تفصیل بررسی کرده‌ام.

Vue بهتر است یا React؟ هیچ‌کدام مطلقاً بهتر نیستند. Vue منحنی یادگیری ملایم‌تری دارد و برای تازه‌کارها یا تیم‌های کوچک سریع‌تر جواب می‌دهد. React اکوسیستم بزرگ‌تر و فرصت‌های شغلی گسترده‌تری دارد. اگر می‌خواهید قبل از تصمیم، تصویر بزرگ‌تر را ببینید، «فرانت‌اند چیست و چگونه کار می‌کند» را بخوانید.

آیا Vue به Node.js نیاز دارد؟ خیر؛ ولی برای پروژه‌های جدی، Vite (که روی Node.js اجرا می‌شود) ابزار پیشنهادی برای توسعه و build است. مسیرهای جانبی این ابزارها در بک‌اند چیست و چه وظایفی دارد بخشی از تصویر بزرگ‌تر توسعه وب را می‌سازد.

چقدر طول می‌کشد تا Vue را یاد بگیرم؟ تسلط پایه در دو تا سه هفته با تمرین روزانه. تسلط حرفه‌ای روی ترکیب Vue + مدیریت وضعیت + TypeScript، حدوداً سه تا شش ماه کار پیوسته لازم دارد.

جمع‌بندی متفاوت: از اولین اپ تا پروژه واقعی

Vue به‌عنوان یکی از کم‌دردسرترین فریم‌ورک‌ها برای شروع، شما را با یک نمونهٔ سبک به نتیجه می‌رساند و مسیر رشد را تا پروژه‌های حرفه‌ای ادامه می‌دهد. اگر امروز با یک فایل HTML ساده شروع کنید و تا یک ماه روی دایرکتیوها، کامپوننت‌ها و فرم‌ها تمرین کنید، بعد از دو ماه می‌توانید با Vite و Pinia یک اپ واقعی بسازید. مهم‌ترین قدم این است که از روز اول با ابزارهای ساده شروع کنید؛ درگیر شدن با ابزارهای پیچیده در هفتهٔ اول، شکست سریع به بار می‌آورد. اگر شما هم مسیر یادگیری Vue را شروع کرده‌اید و به نقطه‌ای برخوردید که مدل واکنش‌گرایی برایتان گیج‌کننده شد، دقیقاً کدام بخش آن بیشتر برایتان مبهم بود؟ همین سؤال، موضوع مقالهٔ بعدی من خواهد بود.