راهنمای شروع با Vue.js برای مبتدیان | آموزش Vue.js

اولین تجربهٔ کاری من با Vue.js به پروژه‌ای برمی‌گردد که در آن برای ساخت پنل ادمین یک فروشگاه اینترنتی، از jQuery خسته شده بودیم. کد جاوااسکریپت به بیش از چهار هزار خط رسیده بود و هر تغییر کوچک، سه جای دیگر را می‌شکست. آن پروژه را با Vue.js دوباره نوشتیم و حجم کد به یک‌سوم رسید — ولی مهم‌تر از حجم، این بود که حالا هر بخش کد، منطق مشخصی داشت. اما انتخاب Vue فقط به دلیل کوتاه‌تر شدن کد نبود؛ دلیل اصلی این بود که منحنی یادگیری آن برای کسی که از دنیای HTML و CSS می‌آید، ملایم‌تر از React و Angular است. این راهنما، همان مسیری است که اگر امروز می‌خواستم Vue را از صفر شروع کنم، دنبال می‌کردم.

Vue.js دقیقاً چیست؟

Vue.js یک فریم‌ورک جاوااسکریپتی برای ساخت رابط کاربری است که توسط Evan You توسعه داده شده و امروز یکی از پرکاربردترین گزینه‌های فرانت‌اند در جهان است. آن را می‌توان به‌عنوان یک لایهٔ میانی بین ساختار HTML شما و منطق جاوااسکریپت در نظر گرفت. Vue به‌جای اینکه شما را مجبور کند همه‌چیز را از صفر با کد بنویسید، از یک ساختار «قالب‌محور» (Template-Based) استفاده می‌کند که در آن می‌توانید با ترکیب دستورهای کوچک در HTML، رفتار پویا بسازید. این طراحی، تفاوت اصلی Vue با Angular و تا حدی React است؛ همان چیزی که باعث شده ورود به آن ساده‌تر باشد. اگر تازه با دنیای فرانت‌اند آشنا شده‌اید، پیش از ادامه، مقالهٔ فرانت‌اند چیست و چگونه کار می‌کند؟ را بخوانید؛ چرا که بدون تصویر کلان از وظیفهٔ فرانت‌اند، انتخاب فریم‌ورک بی‌معنی است.

Vue را می‌توان به‌عنوان یک لایهٔ نازک در نظر گرفت که بدون مزاحمت در HTML، به آن جان می‌دهد.

چرا Vue برای شروع؟

سه دلیل که در تجربهٔ کاری من، Vue را به‌عنوان نقطهٔ شروع جدی می‌کند:

منحنی یادگیری ملایم: می‌توانید Vue را به‌صورت پلکانی یاد بگیرید؛ از یک خط <script> در یک صفحهٔ ساده تا ساخت یک اپلیکیشن کامل با router و state management. برخلاف React، نیازی نیست از روز اول با مفاهیم JSX و virtual DOM درگیر شوید.
مستندات درجه‌یک: مستندات رسمی Vue جزو بهترین مستندات پروژه‌های اوپن‌سورس است — با مثال‌های تعاملی و توضیح گام‌به‌گام.
جامعهٔ فارسی فعال: در بازار ایران، تعداد پروژه‌های Vue.js نسبت به سال‌های گذشته چند برابر شده و منابع فارسی آن هم در حال رشد است.

نکتهٔ مهم که در جلسات مشاوره زیاد می‌گویم: اگر هدف شما فقط ساخت یک سایت وردپرسی یا شخصی است، به احتمال قوی نیازی به Vue ندارید — قالب و چند افزونهٔ سبک کافی است. Vue وقتی ارزشش را نشان می‌دهد که شما یک ناحیهٔ تعاملی پیچیده دارید: پنل ادمین، داشبورد، فرم چندمرحله‌ای، یا یک اپلیکیشن تک‌صفحه‌ای (Single Page Application — SPA). فهرست انتخاب فریم‌ورک‌های فرانت‌اند در بهترین فریم‌ورک‌های فرانت‌اند کدامند؟ به تفصیل آمده است.

پیش‌نیازهای واقعی

برای یادگیری Vue سه چیز باید بلد باشید؛ اگر نبودید، اول این‌ها را تقویت کنید:

HTML پایه: تگ‌ها، ساختار صفحه، فرم‌ها — راهنمای سریع در تگ‌های پرکاربرد HTML و آموزش HTML از صفر.
CSS پایه: چیدمان، رنگ، فاصله — مسیرش در آموزش CSS از صفر و فلکس باکس در CSS.
جاوااسکریپت متوسط: این مهم‌ترین پیش‌نیاز است. اگر با توابع، آرایه‌ها، آبجکت‌ها، map و filter راحت نیستید، اول آن‌ها را تمرین کنید. مسیرش در آموزش جاوااسکریپت از صفر، مفاهیم پایه جاوااسکریپت و آموزش ES6 در جاوااسکریپت.

یک نکتهٔ صادقانه از تجربه‌ام: بیشتر کسانی که در یادگیری Vue جا می‌زنند، نه به‌خاطر خودِ Vue، بلکه به‌خاطر ضعف در جاوااسکریپت پایه است. پس اگر یک هفته وقت بگذارید و جاوااسکریپت را تمیز مرور کنید، بعداً با Vue دو هفته در زمان صرفه‌جویی می‌کنید.

راه‌اندازی محیط توسعه

برای شروع، دو مسیر وجود دارد. مسیر اول، استفاده از Vue به‌صورت مستقیم در HTML بدون ابزار ساخت است؛ فقط یک فایل vue.global.js را از CDN یا از فایل محلی می‌آورید و کار می‌کنید. این مسیر برای یادگیری مفاهیم پایه عالی است و برای پروژه‌های کوچک هم کافی. مسیر دوم، استفاده از ابزار ساخت مثل Vite است که برای پروژه‌های جدی توصیه می‌شود.

# ایجاد یک پروژه Vue با Vite
npm create vite@latest my-app -- --template vue

# ورود به پوشه و نصب وابستگی‌ها
cd my-app
npm install

# اجرای محیط توسعه
npm run dev

ابزارهایی که برای راه‌اندازی حرفه‌ای Vue به کار می‌روند (مثل افزونه‌های مرورگر و ابزارهای دیباگ) در ابزارهای ضروری فرانت‌اند در ۲۰۲۶ فهرست شده‌اند. برای یادگیری اولیه، گزینهٔ اول را توصیه می‌کنم؛ چرا که نیازی به پیکربندی Node.js و وابستگی‌های Node Package Manager (npm) ندارد و می‌توانید در همان دقیقهٔ اول، یک اپ ساده بسازید.

اولین اپلیکیشن Vue در پنج دقیقه

یک فایل HTML بسازید و کد زیر را داخلش بگذارید:

<div id="app">
  <h1>{{ greeting }}</h1>
  <button @click="count++">کلیک ({{ count }})</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp, ref } = Vue;

  createApp({
    setup() {
      const greeting = ref('سلام Vue');
      const count = ref(0);
      return { greeting, count };
    }
  }).mount('#app');
</script>

فایل را در مرورگر باز کنید. خواهید دید که کلیک روی دکمه، عدد را به‌روز می‌کند بدون هیچ کد دستی برای تغییر DOM. این ویژگی، همان reactivity است که در بخش بعدی باز می‌کنم. مهم‌ترین نکته: هیچ خط جاوااسکریپت خالص برای document.querySelector و innerHTML ننوشتیم — Vue خودش این لایه را مدیریت کرد.

Reactivity: قلب تپنده Vue

Reactivity در Vue یعنی «وابستگی داده‌ها به نمایش» به‌صورت خودکار مدیریت می‌شود. وقتی یک متغیر را با ref() یا reactive() تعریف می‌کنید، Vue به تغییرات آن گوش می‌دهد و در صورت لزوم، بخش مربوطه از صفحه را دوباره رندر می‌کند. تفاوت کلیدی با روش قدیمی jQuery این است که شما به‌جای دستور دادن به DOM برای تغییر، صرفاً «وضعیت» را تغییر می‌دهید و Vue تصمیم می‌گیرد چه چیزی را رندر کند. این مدل ذهنی، نقطهٔ چرخش یادگیری Vue است — اگر آن را درک کنید، بقیهٔ مفاهیم خودبه‌خود جا می‌افتند.

برای کار با مقدار ref درون جاوااسکریپت، باید از .value استفاده کنید. در قالب HTML، خود Vue این را برای شما مدیریت می‌کند:

const name = ref('علی');
console.log(name.value); // 'علی'
name.value = 'مریم';    // واکنش‌گرایی فعال می‌شود

دایرکتیوهای پایه که باید بدانید

دایرکتیو (Directive) در Vue، دستور ویژه‌ای است که با پیشوند v- در HTML می‌آید. پنج دایرکتیو که ۹۰٪ کارهای روزمره را پوشش می‌دهند:

v-if — نمایش شرطی یک المان. جایگزین if در قالب است.
v-for — تکرار روی آرایه‌ها و آبجکت‌ها.
v-bind (کوتاه‌شده به :) — اتصال متغیر به ویژگی HTML.
v-on (کوتاه‌شده به @) — گوش دادن به رخدادها مثل click یا input.
v-model — اتصال دوطرفهٔ input به متغیر.

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.title }}
  </li>
</ul>

<input v-model="search" placeholder="جست‌وجو...">
<p v-if="search">در حال جست‌وجوی: {{ search }}</p>

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

کامپوننت‌ها و Props

کامپوننت، واحد ساختاری Vue است. هر کامپوننت شامل یک قالب HTML، منطق جاوااسکریپت و استایل است و می‌توانید آن را در جای دیگری از پروژه استفاده کنید. الگوی اصلی ارسال داده از والد به فرزند، props است و برای ارتباط فرزند به والد، از emit استفاده می‌شود:

<!-- ProductCard.vue -->
<script setup>
  defineProps({ title: String, price: Number });
  defineEmits(['buy']);
</script>

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <p>{{ price }} تومان</p>
    <button @click="$emit('buy', title)">خرید</button>
  </div>
</template>

ساختار <script setup> در Vue 3، نگارش مدرن‌تر و خواناتر است و در پروژه‌های امروزی استاندارد شده. اگر با تایپ‌اسکریپت (TypeScript — ابرمجموعه‌ای از جاوااسکریپت با تایپ ایستا) کار می‌کنید، Vue از آن پشتیبانی رسمی دارد؛ مقایسه و مسیرش در تفاوت تایپ اسکریپت و جاوااسکریپت.

جدول انتخاب: Vue یا React؟

معیار	Vue.js	React
منحنی یادگیری	ملایم‌تر	سخت‌تر در شروع
نحو نوشتاری	قالب HTML + دستور	JSX درون جاوااسکریپت
مناسب برای	اپ‌های کوچک و متوسط، پنل ادمین	اپ‌های بزرگ، اکوسیستم بزرگ‌تر
بازار کار ایران	در حال رشد	بزرگ‌تر و پرتقاضاتر
یکپارچگی با وردپرس	ساده‌تر در لایهٔ قالب	ممکن ولی پیچیده‌تر
ابزار رسمی مسیریابی و state	Vue Router + Pinia	React Router + Redux/Zustand

اشتباهات رایج مبتدی‌ها در Vue

استفاده از Vue برای کارهایی که CSS و HTML کافی است: اگر فقط می‌خواهید یک منوی ساده را باز و بسته کنید، نیازی به Vue نیست. سادگی را حفظ کنید.
مخلوط کردن jQuery و Vue در یک کامپوننت: این کار باعث می‌شود Vue از تغییرات DOM مطلع نشود و رفتار غیرمنتظره بدهد.
فراموش کردن .value در ref: یکی از رایج‌ترین باگ‌های تازه‌واردها. مقدار ref بدون .value فقط یک آبجکت است، نه مقدار واقعی.
تغییر مستقیم props در کامپوننت فرزند: Vue هشدار می‌دهد ولی اگر نادیده بگیرید، منطق برنامه به‌هم می‌ریزد. props فقط خواندنی است.
نبود key در v-for: بدون key یکتا، Vue نمی‌تواند لیست‌ها را بهینه به‌روز کند و خطاهای ظریف ممکن است پیش بیاید.

از دید توسعه‌دهنده ارشد: چرا Vue هنوز انتخاب هوشمندانه‌ای است

در سطح معماری، انتخاب Vue باید بر اساس سه سؤال انجام شود. یک: ماهیت پروژه چیست؟ Vue برای پروژه‌هایی که رابط کاربری پیچیده دارند (داشبورد، پنل مدیریت، فرم‌های تعاملی) و می‌خواهند در زمان کمتر به نتیجه برسند، انتخاب عالی است. برای اپلیکیشن‌های بسیار بزرگ با تیم‌های چند‌نفره، React به‌دلیل اکوسیستم و بازار کار بزرگ‌تر معمولاً انتخاب عاقلانه‌تری است — مقایسه‌شان را در آیا ری‌اکت برای فرانت‌اند بهترین انتخاب است؟ باز کرده‌ام. دو: معماری data flow چطور طراحی می‌شود؟ در Vue، مدل reactivity با Proxy پیاده‌سازی شده که در Vue 3 راندمان بالاتری از نسخه‌های قبلی دارد. این یعنی اگر حجم state شما زیاد باشد، Vue 3 با مدیریت بهتر وابستگی‌ها، رندرهای اضافی را کاهش می‌دهد. اما این مزیت وقتی خودش را نشان می‌دهد که معماری state شما تمیز باشد؛ چرا که در غیر این صورت، reactivity دقیقاً همان جایی است که باگ‌های پنهان می‌سازد. سه: استراتژی یکپارچگی با بک‌اند چیست؟ در پروژه‌های وردپرسی، ترکیب Vue با REST API وردپرس یا با GraphQL، الگوی رایجی است؛ نگاهی به این معماری در API در وردپرس و آموزش استفاده از GraphQL در وردپرس آمده است.

نکتهٔ پایانی که از تجربهٔ خودم می‌گویم: بسیاری از تیم‌ها Vue را به‌عنوان «نسخهٔ ساده‌تر React» انتخاب می‌کنند و بعد در پروژه‌های بزرگ به دیوار می‌خورند؛ نه به این دلیل که Vue نمی‌تواند، بلکه به این دلیل که در انتخاب ابزارهای اکوسیستم اشتباه می‌کنند. اگر Vue را انتخاب کردید، Pinia را برای state management و Vue Router را برای مسیریابی جدی بگیرید؛ ترکیب این سه، پایهٔ یک معماری حرفه‌ای است. در چند پروژهٔ داشبورد اختصاصی که با همین ترکیب ساخته‌ام، امکان تست‌پذیری کامپوننت‌ها و جداسازی منطق از نمایش به سطحی رسید که تیم پشتیبانی هم می‌توانست بدون درگیر شدن با کل کد، یک ویژگی جدید به یک ماژول اضافه کند — چیزی که در نسخهٔ قبلی همان پروژه با jQuery غیرممکن بود. برای توسعه‌دهندگانی که می‌خواهند مسیر را ادامه دهند، مطالعهٔ چگونه یک توسعه‌دهنده فرانت‌اند شویم؟ و نقش HTML CSS و JavaScript در فرانت‌اند تصویر کامل‌تری می‌دهد.

اگر در شروع کار با Vue به یک نکتهٔ غیرمنتظره برخوردید — مثلاً تعامل Vue با یک قالب وردپرسی، یا مدیریت state در یک اپ چندزبانه — سناریو را در دیدگاه بنویسید. مسیر یادگیری Vue وقتی ساده‌تر می‌شود که تجربه‌های واقعی دیگران را در کنار مستندات رسمی ببینیم. 🟢