معرفی ​

می‌توانید Vue را با آموزش‌های ویدیویی در VueMastery.com بیاموزید.

Vue چیست؟ ​

Vue (که مانند واژه "view" خوانده می‌شود) یک فریمورک جاوااسکریپت برای ساخت رابط کاربری است. این فریمورک بر روی استانداردهای CSS ، HTML و جاوااسکریپت استوار است و یک مدل برنامه‌نویسی اعلامی و مبتنی بر کامپوننت را فراهم می‌کند که به شما کمک می‌کند رابط کاربری با هر پیچیدگی را به طور کارآمد توسعه دهید.

در اینجا یک نمونه ساده آورده شده است:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

نتیجه

نمونه فوق دو ویژگی اصلی Vue را نشان می‌دهد:

• Declarative Rendering: فریمورک Vue با ارائه ساختار تمپلیت که به ما اجازه می‌دهد به صورت اعلامی خروجی HTML را بر اساس وضعیت جاوااسکریپت توصیف کنیم، HTML استاندارد را توسعه می‌دهد.

• Reactivity: فریمورک Vue به طور خودکار تغییرات وضعیت جاوااسکریپت را پیگیری می‌کند و هنگامی که تغییرات رخ دهد، به طور کارآمد DOM را به‌روز می‌کند.

شما ممکن است هم اکنون سوالاتی داشته باشید - نگران نباشید. ما در بقیه مستندات، به ریز جزئیات می‌پردازیم. اکنون، لطفاً ادامه دهید تا بتوانید درک کلی از امکاناتی که Vue ارائه می‌دهد داشته باشید.

فریمورک پیش‌رونده ​

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

• بهبود HTML استاتیک بدون build step
• تعبیه به عنوان وب کامپوننت‌ها در هر صفحه
• برنامه تک صفحه‌ای (SPA)
• فول‌استک / رندر سمت سرور (SSR)
• Jamstack / تولید سایت استاتیک (SSG)
• برای دسکتاپ، موبایل، WebGL و حتی ترمینال

اگر این مفاهیم برایتان نگران‌کننده به نظر می‌رسند، نگران نباشید! آموزش و راهنما فقط به دانش ابتدایی HTML و جاوااسکریپت نیاز دارند و شما باید بتوانید بدون اینکه در هیچ یک از این موارد متخصص باشید، ادامه دهید.

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

علیرغم این انعطاف‌پذیری، دانش اصلی در مورد نحوه کارکرد Vue در تمام این موارد استفاده مشترک است. حتی اگر شما هم‌اکنون فقط یک مبتدی هستید، دانشی که در طول مسیر به دست می‌آورید در آینده، هنگامی که با هدف‌های بلند پروازانه‌تر مواجه می‌شوید، مفید خواهد بود. اگر شما یک کارآزموده هستید، می‌توانید راه بهینه برای استفاده از Vue را بر اساس مشکلاتی که سعی دارید حل کنید انتخاب کنید، در حالی که همان بهره‌وری را حفظ می‌کنید. به همین دلیل است که ما Vue را "The Progressive Framework" می‌نامیم: این یک فریمورک است که می‌تواند با شما رشد کند و به نیازهای شما واکنش نشان دهد.

کامپوننت‌های تک‌فایل (SFC) ​

در بیشتر پروژه‌های Vue که از build-tool استفاده می‌کنند، ما کامپوننت‌های Vue را با استفاده از یک فرمت فایل شبیه به HTML به نام Single-File Components نوشته‌ایم (همچنین به عنوان فایل‌های ‍‍‎*.vue شناخته شده و به اختصار SFC نامیده می‌شود). یک SFC در Vue، همان‌طور که از نام آن پیداست، منطق کامپوننت (جاوااسکریپت)، تمپلیت (HTML) و استایل‌ها (CSS) را در یک فایل جمع‌آوری می‌کند. در اینجا نمونه قبلی که به فرمت SFC نوشته شده است را مشاهده می‌کنید:

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

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

SFC یک ویژگی معین‌کننده در Vue است و روش پیشنهادی برای نوشتن کامپوننت‌های Vue است اگر مورد استفاده شما نیاز به تنظیمات Build داشته باشد. شما می‌توانید بیشتر در مورد چگونگی و چرای SFC بیاموزید، اما فعلاً فقط بدانید که Vue تمام تنظیمات Build را برای شما انجام می‌دهد.

سبک APIها ​

کامپوننت‌های Vue می‌توانند با دو سبک API مختلف نوشته شوند: Options API و Composition API.

Options API ​

با استفاده از Options API، ما منطق یک کامپوننت را با استفاده از یک آبجکت از آپشن‌ها تعریف می‌کنیم مانند data ، methods و mounted. ویژگی‌هایی که توسط هر یک از آپشن‌ها تعریف شده‌اند، در داخل this قرار داده می‌شوند که به نمونه ساخته شده از کامپوننت اشاره دارد:

<script>
export default {
  // می‌شوند reactive state تبدیل به data() مقادیر بر گشت داده شده از
  // قابل دسترسی خواهند بود `this` و روی
  data() {
    return {
      count: 0
    }
  },

  // را تغییر می‌دهند و به‌روزرسانی‌ها را فعال می‌کنند state متدها توابعی هستند که
  // آنها می‌توانند به عنوان کنترل‌کننده‌های رویداد در تمپلیت‌ها متصل شوند
  methods: {
    increment() {
      this.count++
    }
  },

  // هوک‌های چرخه حیات در مراحل مختلفی 
  // از چرخه حیات یک کامپوننت صدا زده می‌شوند
  // شد صدا زده خواهد شد mount این تابع هنگامی که کامپوننت
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

آن را در Playground امتحان کنید

Composition API ​

با استفاده از Composition API ما منطق یک کامپوننت را با استفاده از توابع API که import شده‌اند تعریف می‌کنیم. در SFCها، معمولاً Composition API با <script setup> استفاده می‌شود. ویژگی setup باعث می‌شود Vue تبدیل‌های زمان کامپایل را انجام دهد که به ما اجازه می‌دهد از Composition API استفاده کنیم با استفاده از کدهای کمتر. به عنوان مثال: import شده‌ها و متغیرها / توابع سطح بالا که در <script setup> تعریف شده‌اند، مستقیماً در تمپلیت قابل استفاده هستند.

در اینجا همان کامپوننت است، با دقیقاً همان تمپلیت، اما با استفاده از Composition API و <script setup> :

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// را تغییر می‌دهند و به روز رسانی را راه‌اندازی می‌کنند state توابعی که
function increment() {
  count.value++
}

// هوک‌های چرخه حیات
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

آن را در Playground امتحان کنید

کدام را انتخاب کنیم؟ ​

هر دو سبک API کاملاً قادر به پوشش موارد استفاده متداول هستند. آن‌ها واسط‌های متفاوتی هستند که دقیقاً از یک سیستم قدرت می‌‌گیرند. در واقع، Options API بر روی Composition API پیاده‌سازی شده است! مفاهیم اساسی و دانش در مورد Vue در دو سبک به اشتراک گذاشته شده است.

Options API بر مفهوم "component instance" متمرکز است (که در مثال به عنوان ‍this دیده می‌شود)، که معمولاً برای کاربرانی که از پس‌زمینه‌هایی با زبان OOP می‌آیند، بهتر با مدل ذهنی مبتنی بر کلاس تطابق دارد. همچنین با پنهان کردن جزئیات reactivity و اجبار به سازماندهی کد از طریق آپشن‌های مختلف، برای مبتدیان دوستانه‌تر است.

Composition API، متغیرهای reactive را مستقیماً در اسکوپ تابع تعریف می‌کند و با ترکیب وضعیت از چندین تابع با یکدیگر به مدیریت پیچیدگی می‌پردازد. این روش بیشتر از آزادی برخوردار است و برای استفاده موثر نیازمند درک از عملکرد reactivity در Vue می‌باشد. درازای این کار؛ انعطاف پذیری آن الگوهای قدرتمندتری را برای سازماندهی و استفاده مجدد از منطق فراهم می‌کند.

شما می‌توانید در مورد مقایسه بین دو سبک و مزایای بالقوه Composition API بیشتر بیاموزید در سوالات متداول Composition API.

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

• برای اهداف یادگیری، با سبکی که برایتان آسان‌تر به نظر می‌رسد پیش بروید. بیشتر مفاهیم اصلی بین دو سبک به اشتراک گذاشته شده است. شما همیشه می‌توانید بعداً سبک دیگر را یاد بگیرید.

• برای استفاده در محیط پروداکشن:

  • اگر از build tools استفاده نمی‌کنید، یا قصد دارید Vue را عمدتاً در سناریوهای کم‌پیچیدگی استفاده کنید، مثل بهبود تدریجی، با Options API پیش بروید.

  • اگر قصد دارید نرم‌افزارهای کامل با Vue بسازید، با Composition API + کامپوننت‌های Single-File پیش بروید.

شما در طول مرحله یادگیری نیازی به پایبندی به فقط یک سبک ندارید. بقیه مستندات نمونه‌ کدها را در هر دو سبک (جایی که کاربردی باشد) ارائه خواهد داد، و شما می‌توانید در هر زمان با استفاده از کلید API در بالای نوار کناری سمت چپ بین Composition و Options جابجا شوید.

هنوز هم سوالی دارید؟ ​

به سوالات متداول ما سر بزنید.

مسیر یادگیری خود را انتخاب کنید ​

توسعه‌دهندگان مختلف، سبک‌های متفاوتی در یادگیری دارند. بدون هیچ مشکلی مسیر یادگیری را انتخاب کنید که به سلیقه شما نزدیک است - اگرچه ما توصیه می‌کنیم اگر امکان دارد، تمام محتوا را مطالعه کنید!