باز کردن قدرت Vue 3: بررسی عمیق Composition API

Vue.js همواره به خاطر منحنی یادگیری ملایم و طراحی تدریجی خود تحسین شده است. با انتشار Vue 3، این فریم‌ورک تغییری در پارادایم ایجاد کرد که به یکی از مهم‌ترین چالش‌های توسعه‌دهندگان در ساخت برنامه‌های تک‌صفحه‌ای (SPA) در مقیاس بزرگ می‌پردازد: سازماندهی و بازنویسی کد. این تغییر به عنوان Composition API شناخته می‌شود. اگرچه Options API همچنان به‌طور کامل پشتیبانی می‌شود، اما Composition API راهی انعطاف‌پذیرتر، ایمن‌تر از نظر نوع داده (Type-safe) و منسجم‌تر از نظر منطقی برای ساختاردهی کامپوننت‌های شما ارائه می‌دهد. در این پست، بررسی می‌کنیم که چرا Composition API یک بازی‌ساز است، چگونه کار می‌کند و چگونه می‌توانید از آن برای نوشتن کد Vue تمیزتر و قابل‌حفظ‌تر استفاده کنید.

از Options به Composition: حل مشکل مقیاس‌پذیری

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

Composition API با اجازه دادن به شما برای سازماندهی کد بر اساس نگرش منطقی به جای نوع گزینه، این مشکل را حل می‌کند. به جای گروه‌بندی کد بر اساس data یا methods، منطق مرتبط را در توابع گروه‌بندی می‌کنید. این رویکرد منجر به خوانایی بهتر، بازسازی آسان‌تر و پشتیبانی برتر از TypeScript می‌شود که برای برنامه‌های سطح سازمانی حیاتی است.

مفاهیم کلیدی: Ref، Reactive و Composables

هسته اصلی Composition API در مجموعه‌ای از اصول اولیه واکنش‌گرا (Reactive primitives) نهفته است که توسط پکیج @vue/reactivity ارائه می‌شوند. دو تابع بنیادی‌ترین آن‌ها ref و reactive هستند.

ref برای ایجاد ارجاعات واکنش‌گرا به مقادیر اولیه (مانند رشته‌ها، اعداد یا بولین‌ها) استفاده می‌شود. این تابع مقدار را در یک ویژگی .value نگه می‌دارد. از سوی دیگر، reactive برای ایجاد اشیاء واکنش‌گرا استفاده می‌شود. این تابع از ES6 Proxies برای واکنش‌گرا کردن تمام ویژگی‌های شیء استفاده می‌کند.

با این حال، قدرت واقعی Composition API از طریق Composables آشکار می‌شود. یک Composable صرفاً یک تابع است که از اصول اولیه واکنش‌گرای Vue برای بسته‌بندی و بازنویسی منطق دارای وضعیت استفاده می‌کند. این موضوع مشابه هوک‌های سفارشی در React است، اما با سیستم واکنش‌گرایی Vue در آن ادغام شده است. با استخراج منطق به composableها، می‌توانید رفتار را بین چندین کامپوننت به اشتراک بگذارید بدون اینکه به میکسین‌ها (Mixins) روی آورید که از آلودگی فضای نام و عدم وضوح منشأ داده رنج می‌برند.

مثال عملی: ساخت یک شمارنده قابل استفاده مجدد

بیایید به یک مثال عملی نگاه کنیم. فرض کنید به شمارنده‌ای نیاز داریم که تعداد دفعات کلیک روی یک دکمه را ردیابی کند. در Options API، این ممکن است ساده به نظر برسد، اما بیایید ببینیم چگونه می‌توانیم آن را با Composition API قابل استفاده مجدد کنیم.

اولین قدم، ایجاد یک Composable به نام useCounter است:

// useCounter.js
import { ref } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return {
    count,
    increment,
    decrement
  };
}

اکنون می‌توانیم از این composable در هر کامپوننتی استفاده کنیم:

// CounterComponent.vue
<template>
  <div>
    <p>شمارش: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

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

// می‌توانیم مقدار اولیه را سفارشی کنیم
const { count, increment, decrement } = useCounter(10);
</script>

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

چرا باید Composition API را بپذیریم؟

پذیرش Composition API تنها درباره دنبال کردن ترندها نیست؛ بلکه درباره پذیرش شیوه‌های معماری بهتر است. این روش با اجازه دادن به اشتراک‌گذاری منطق بدون عوارض جانبی میکسین‌ها، قابلیت استفاده مجدد کد را بهبود می‌بخشد. استنتاج نوع (Type inference) را در TypeScript تقویت می‌کند و کدبیس شما را مستحکم‌تر می‌سازد. در نهایت، با حفظ منطق مرتبط در کنار هم، خوانایی را بهبود می‌بخشد که این امر بار شناختی را هنگام اشکال‌زدایی یا گسترش ویژگی‌ها به طور قابل توجهی کاهش می‌دهد.

نتیجه‌گیری

Composition API در Vue 3 نشان‌دهنده بلوغ فریم‌ورک است و ابزارهای لازم را برای ساخت برنامه‌های مقیاس‌پذیر، قابل‌حفظ‌تر و با عملکرد بالا در اختیار توسعه‌دهندگان قرار می‌دهد. با حرکت از ساختارهای سخت‌گیرانه مبتنی بر گزینه به سمت ترکیبات انعطاف‌پذیر مبتنی بر تابع، می‌توانید کدی بنویسید که خواندن، آزمایش و استفاده مجدد از آن آسان‌تر است. چه در حال شروع یک پروژه جدید باشید و چه در حال بازسازی یکی از پروژه‌های موجود، پذیرش Composition API قطعاً در بلندمدت به نفع شما خواهد بود. با استخراج چند composable از کامپوننت‌های پیچیده خود به صورت کوچک شروع کنید و به سرعت مزایای این ویژگی قدرتمند را مشاهده خواهید کرد.