راهنمای نهایی برای Vue 3 Composition API: نکات و بهترین روش ها

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

Composition API چیست؟

Composition API مجموعه ای از APIهای افزودنی مبتنی بر عملکرد است که به توسعه دهندگان اجازه می دهد تا منطق کد و حالت را در اجزای Vue بهتر مدیریت کنند. هدف آن رفع محدودیت های Options API با فعال کردن قابلیت استفاده مجدد کد و سازماندهی بیشتر، به ویژه در برنامه های بزرگتر است.

مزایای Composition API

سازمان کد بهبود یافته

Composition API به شما این امکان را می دهد که منطق مرتبط را با هم به روشی ماژولارتر گروه بندی کنید. به جای تقسیم کد خود به قلاب‌های چرخه حیات و گزینه‌های مؤلفه، می‌توانید واحدهای منطقی را در توابع تعریف کنید و خواندن و نگهداری کد خود را آسان‌تر کنید.

مثال:

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    return {
      count,
      doubleCount,
      increment
    };
  }
};

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

با Composition API، می‌توانید توابع قابل استفاده مجدد ایجاد کنید که بخش‌های منطقی خاصی را کپسوله می‌کنند، که می‌تواند در چندین مؤلفه به اشتراک گذاشته شود. این امر اصول DRY (تکرار نکنید) را ترویج می کند و تکرار کد را کاهش می دهد.

مثال:

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

export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Component.vue
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  }
};

پشتیبانی از TypeScript پیشرفته

Composition API برای کار یکپارچه با TypeScript طراحی شده است، استنتاج و تکمیل خودکار بهتری را ارائه می دهد، که می تواند بهره وری توسعه دهنده و کیفیت کد را بهبود بخشد.

مثال:

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref<number>(0);
    const doubleCount = computed(() => count.value * 2);

    function increment(): void {
      count.value++;
    }

    return {
      count,
      doubleCount,
      increment
    };
  }
};

انعطاف پذیری بیشتر

Composition API با امکان استفاده از ویژگی های جاوا اسکریپت مانند بسته شدن، وارد کردن و صادر کردن توابع، و ترکیب چندین بخش منطق بدون محدود شدن توسط چرخه حیات کامپوننت، انعطاف بیشتری را ارائه می دهد.

بهترین روش ها برای استفاده از Composition API

1. منطق را به توابع قابل ترکیب سازماندهی کنید

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

مثال:

// 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 };
}

2. از مراجع واکنشی هوشمندانه استفاده کنید

استفاده کنید ref برای مقادیر اولیه و reactive برای اشیا یا آرایه ها این تضمین می کند که Vue می تواند وابستگی ها را ردیابی کند و رابط کاربری را به طور موثر به روز کند.

مثال:

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const user = reactive({ name: 'John', age: 30 });

    function increment() {
      count.value++;
    }

    return { count, user, increment };
  }
};

3. خواص محاسبه شده اهرمی

استفاده کنید computed خواص برای حالت مشتق شده که به سایر داده های واکنشی بستگی دارد. این به شما کمک می کند تا منطق خود را شفاف و کارآمد نگه دارید.

مثال:

import { ref, computed } from 'vue';

export default {
  setup() {
    const price = ref(100);
    const quantity = ref(2);
    const total = computed(() => price.value * quantity.value);

    return { price, quantity, total };
  }
};

4. عوارض جانبی را در آن نگه دارید setup

عوارض جانبی مانند واکشی داده یا شنوندگان رویداد را در داخل آن قرار دهید setup عملکرد با استفاده از قلاب چرخه عمر مانند onMounted و onUnmounted.

مثال:

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);

    onMounted(async () => {
      const response = await fetch('https://api.example.com/data');
      data.value = await response.json();
    });

    return { data };
  }
};

5. از Watchers برای اثرات واکنشی استفاده کنید

استفاده کنید watch برای واکنش به تغییرات داده های واکنشی. این برای اجرای کد در پاسخ به تغییرات داده ها مفید است.

مثال:

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newCount) => {
      console.log('Count changed to', newCount);
    });

    return { count };
  }
};

هنگامی که از Composition API استفاده نکنید

اجزای ساده

اگر منطق مؤلفه شما ساده است و به راحتی در Options API مدیریت می شود، استفاده از Composition API ممکن است غیر ضروری باشد. Options API هنوز برای بسیاری از موارد استفاده، به خصوص در اجزای کوچکتر کاملاً معتبر است.

منحنی یادگیری

برای مبتدیان یا تیم‌های تازه وارد به Vue.js، درک Options API ممکن است در ابتدا آسان‌تر باشد. Composition API مفاهیم جدیدی را معرفی می کند که نیاز به درک عمیق تری از جاوا اسکریپت و سیستم واکنش پذیری Vue دارد.

پیچیدگی مهاجرت

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

Vue 3 Composition API روشی انعطاف‌پذیرتر و قدرتمندتر برای مدیریت منطق مؤلفه‌ها، ارائه سازمان‌دهی کد بهبود یافته، قابلیت استفاده مجدد بهتر، پشتیبانی از TypeScript پیشرفته و انعطاف‌پذیری بیشتر را ارائه می‌دهد. با پیروی از بهترین شیوه ها و درک زمان استفاده یا اجتناب از Composition API، می توانید برنامه های Vue.js قابل نگهداری و مقیاس پذیرتری بسازید.

چه مبتدی باشید و چه یک توسعه دهنده با تجربه، تسلط بر Composition API مهارت های توسعه Vue.js شما را به میزان قابل توجهی افزایش می دهد. کد نویسی مبارک!