تسلط بر Composition API در Vue 3: گشودن قفل مقیاس‌پذیری و قابلیت استفاده مجدد

برای سال‌ها، Options API نبض تپنده توسعه Vue.js بود. اگرچه برای برنامه‌های کوچک تا متوسط مؤثر بود، اما اغلب توسعه‌دهندگان را مجبور می‌کرد تا منطق مرتبط را در سراسر ویژگی‌های متعددی مانند data، methods و watchers پراکنده کنند. با ورود Composition API، روش جدیدی برای سازماندهی کامپوننت‌های Vue معرفی شد که سطوح بی‌سابقه‌ای از ساختار، مقیاس‌پذیری و قابلیت استفاده مجدد را به ارمغان می‌آورد. این پست بررسی می‌کند که چرا باید این تغییر را اعمال کنید و چگونه می‌توانید از قدرت آن به‌طور مؤثر استفاده کنید.

محدودیت‌های Options API

قبل از ورود به راه‌حل، درک مشکل ضروری است. در Options API، منطق بر اساس نوع گزینه گروه‌بندی می‌شد، نه بر اساس نگرش منطقی. برای مثال، اگر در حال ساخت یک کامپوننت اعتبارسنجی فرم پیچیده بودید، منطق اعتبارسنجی شما ممکن است بین data (برای حالت)، computed (برای حالت مشتق‌شده)، watch (برای اثرات جانبی) و methods (برای اقدامات) تقسیم شود. با بزرگ‌تر شدن این کامپوننت‌ها، ورق زدن بین ده‌ها خط کد برای نگهداری و آموزش اعضای جدید تیم به یک کابوس تبدیل می‌شد.

ورود Composition API

Composition API به ما امکان می‌دهد کد را بر اساس نگرش‌های منطقی به جای انواع گزینه‌ها سازماندهی کنیم. با استفاده از توابع به جای گزینه‌ها، می‌توانیم منطق مرتبط را در کنار هم گروه‌ب کنیم. هسته این API حول پرایمیتیوهای واکنش‌گرا: ref و reactive و هوک‌های چرخه عمر می‌چرخد که اکنون از vue ایمپورت می‌شوند، نه اینکه از طریق this دسترسی پیدا کنند.

بیایید یک مثال عملی از تبدیل یک سیستم شمارنده و سلام ساده از Options API به سینتکس Composition API را بررسی کنیم.

مثال کد: Composition پایه

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

// حالت واکنش‌گرا با استفاده از ref
const count = ref(0);
const name = ref('Vue Developer');

// ویژگی محاسباتی
const greeting = computed(() => {
  return `Hello, ${name.value}! You have ${count.value} notifications.`;
});

// متد برای به‌روزرسانی حالت
function increment() {
  count.value++;
}

function updateName(newName) {
  name.value = newName;
}
</script>

<template>
  <div>
    <p>{{ greeting }}</p>
    <button @click="increment">Increment</button>
    <input v-model="name" placeholder="Enter name" />
  </div>
</template>

تمیزی کد را مشاهده کنید. قالب با <script setup> ساده‌تر شده است، یک ماکرو کامپایلر که تعاریف سطح بالا در <script setup> را به‌طور خودکار در قالب در دسترس قرار می‌دهد. مهم‌تر از آن، منطق مرتبط (حالت و توابعی که آن حالت را دستکاری می‌کنند) در کنار هم قرار دارند که خواندن و اشکال‌زدایی کامپوننت را آسان‌تر می‌کند.

بهبود قابلیت استفاده مجدد با Composables

مهم‌ترین مزیت Composition API توانایی استخراج و استفاده مجدد از منطق دارای حالت است. در Options API، میکسین‌ها روش سنتی برای استفاده مجدد از منطق بودند، اما آن‌ها با مشکلات تداخل نام و عدم وضوح منبع داده روبرو بودند. Composition API Composables را معرفی می‌کند—توابعی که منطق قابل استفاده مجدد را در خود جای می‌دهند.

یک Composable تابعی است که از Composition API Vue برای بسته‌بندی و نمایش حالت واکنش‌گرا استفاده می‌کند. از آنجا که این فقط یک تابع است، ورودی (آرگومان‌ها) و خروجی (مقادیر واکنش‌گرا برگشتی) واضحی دارد که مشکلات ابهام میکسین‌ها را حل می‌کند.

مثال کد: ایجاد یک Composable

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  onMounted(() => {
    window.addEventListener('mousemove', update);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
  });

  return { x, y };
}

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

<script setup>
import { useMouse } from './useMouse';

const { x, y } = useMouse();
</script>

نتیجه‌گیری

Composition API در Vue 3 تنها یک تغییر سینتاکسی نیست؛ بلکه یک تغییر پارادایم است که به توسعه‌دهندگان امکان می‌دهد برنامه‌های قوی‌تر، مقیاس‌پذیرتر و قابل نگهداری‌تری بسازند. با اجازه دادن به گروه‌بندی منطقی کد و ارائه ابزارهای قدرتمند برای استخراج منطق از طریق Composables، این API مشکلات مقیاس‌پذیری که پروژه‌های بزرگ Vue 2 را آزار می‌داد را برطرف می‌کند. برای توسعه‌دهندگان متوسط تا پیشرفته، تسلط بر Composition API دیگر اختیاری نیست—بلکه برای ماندن در خط مقدم مهندسی فرانت‌اند مدرن ضروری است.