بهترین شیوه‌های Vue 3 برای پروژه‌های واقعی

Vue 3 یک ارتقای واقعی است، نه فقط یک به‌روزرسانی نحوی. Composition API، <script setup> و Pinia نحوه ساختاردهی یک فرانت‌اند را تغییر می‌دهند — به سمت بهتر، اگر بگذارید. این‌ها الگوهایی هستند که پروژه‌های Vue 3 من را بعد از پایان ماه عسل قابل نگهداری نگه داشتند.

script setup را در آغوش بگیرید

<script setup> کدهای تکراری را حذف و منطق کامپوننت را خوانا می‌کند. propها، emitها و importها همه بالا هستند؛ بدون تشریفات export default { ... }.

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  course: { title: string; price: number };
}>();

const formattedPrice = computed(() =>
  new Intl.NumberFormat('fa-IR').format(props.course.price)
);
</script>

composableها برای منطق مشترک

اگر منطق واکنش‌گرا را بین کامپوننت‌ها کپی‌پیست می‌کنید، یک composable استخراج کنید. نامش را useSomething بگذارید و متمرکز نگهش دارید:

// composables/usePagination.ts
export function usePagination(totalItems: Ref<number>, perPage = 20) {
  const page = ref(1);
  const totalPages = computed(() => Math.ceil(totalItems.value / perPage));
  return { page, totalPages };
}

composableها پاسخ Vue 3 به mixinها هستند، بدون تداخل نام‌گذاری و وابستگی‌های مبهم mixinها.

Pinia به‌جای Vuex

Pinia ساده‌تر، دوست‌دار TypeScript و رسماً توصیه‌شده است. یک store برای هر دامنه (useCartStore، useAuthStore)، اکشن‌ها را نازک نگه دارید و state رابط کاربری را در storeهای سراسری نگذارید، مگر اینکه چند کامپوننت بی‌ربط به آن نیاز داشته باشند.

مرزهای کامپوننت

• کامپوننت‌های هوشمند در برابر ساده. کامپوننت‌های ظرف داده می‌گیرند و prop پایین می‌فرستند؛ کامپوننت‌های نمایشی فقط رندر می‌کنند. این تست و بازاستفاده را بدیهی می‌کند.
• تمپلیت‌ها را خوانا نگه دارید. اگر تمپلیت شما شرطی‌های سه‌گانه تودرتو دارد، منطق را به یک computed منتقل کنید.
• propها را نوع‌دهی کنید. TypeScript دسته بزرگی از باگ‌ها را به‌جای مرورگر، در زمان کامپایل می‌گیرد.

کارایی بدون بهینه‌سازی زودهنگام

وقتی مسئله‌ای را اندازه گرفتید از v-memo و shallowRef استفاده کنید. پیش‌فرض را روی روشنی بگذارید. مسیرها را با importهای پویا برای تقسیم کد به‌صورت تنبل بارگذاری کنید:

const CourseShow = () => import('@/pages/courses/Show.vue');

اشتباهات رایج

• همه چیز در یک کامپوننت غول‌پیکر. زود تقسیم کنید؛ ادغام از باز کردن گره آسان‌تر است.
• تغییر دادن propها. propها پایین می‌روند؛ رویدادها بالا می‌آیند. همیشه.
• استفاده بیش از حد از state سراسری. state محلی اشکالی ندارد. همه چیز به Pinia تعلق ندارد.

بهترین شیوه‌ها

• قراردادهای پوشه‌بندی را زود تثبیت کنید: pages/، components/، composables/، stores/.
• برای composableها و storeهای منطق‌سنگین تست کامپوننت بنویسید، نه برای هر دکمه.
• از ESLint و راهنمای سبک رسمی Vue به‌عنوان خط پایه تیم استفاده کنید.

جمع‌بندی

Vue 3 به ساختار پاداش می‌دهد: script setup برای روشنی، composableها برای بازاستفاده، Pinia برای state مشترک و مرزهای هوشمند کامپوننت برای نگهداری‌پذیری. این الگوها را زود اتخاذ کنید و فرانت‌اندتان با انباشته شدن ویژگی‌ها زیر وزن خودش فرونمی‌ریزد. این اسپرینت یک کامپوننت اضافه‌وزن را به یک جفت ظرف به‌علاوه نمایشی بازآرایی کنید — برد را فوراً حس می‌کنید.