کامپوننت های تک فایلی - SFC ​

مقدمه ​

فایل‌هایی با پسوند ‎*.vue و به صورت مخفف SFC که کوتاه شده عبارت Single-File Components ​است، یک فرمت ویژه هستند که به ما اجازه می‌دهند تا تمپلیت، منطق و استایل یک کامپوننت Vue را در یک فایل واحد بنویسیم. در مثال زیر نمونه ای از یک فایل SFC را مشاهده می‌کنید:

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

همانطور که می‌بینید، کامپوننت‌های تک‌ فایلی Vue ترکیبی از HTML و CSS و JavaScript هستند. بلوک‌های <template> و <script> و <style> عناصر نمایشی، منطق و استایل یک کامپوننت را در یک فایل واحد جای می‌دهند. می‌توانید جزئیات کامل تر را در بخش سینتکس کامپوننت‌های تک فایلی (SFC) ببینید.

چرا SFC ؟ ​

هرچند که SFC ها نیاز به مرحله اضافه بیلد دارند، اما مزایای زیادی در استفاده از آنها وجود دارد:

• ماژولار کردن کامپوننت‌ها‌، با استفاده از سینتکس آشنای CSS , HTML و جاوااسکریپت
• تفکیک دغدغه‌ها
• تمپلیت ها قبل از استفاده کامپایل می‌شوند، بنابراین وقتی در برنامه استفاده می‌شوند، نیاز به کامپایل در زمان اجرا نیست.
• استفاده از CSS محدود به کامپوننت
• سینتکس بهتر در هنگام استفاده از Composition API
• بهینه‌سازی‌های بیشتر در زمان کامپایل، با تحلیل همزمان تمپلیت و اسکریپت
• پشتیبانی (IDE) با تکمیل خودکار و بررسی تایپ داده ها در نوشتن متغیرها در تمپلیت
• نمایش تغییرات بدون نیاز به لود مجدد صفحه

در سناریو های زیر از SFC ها استفاده کنید:

• اپلیکیشن‌های تک صفحه‌ای (SPA)
• تولید سایت استاتیک (SSG)
• در هر پروژه فرانت‌اند پیچیده‌ای که مرحله‌ای از ساخت (build) می‌تواند به تجربه توسعه بهتر (DX) کمک کند.

در یک سری از سناریو ها استفاده از کامپوننت‌های تک فایلی می‌تواند زیاده روی باشد، بخاطر همین Vue می‌تواند در کد script ساده هم استفاده شود. اگر فقط می‌خواهید یک صفحه HTML نسبتاً استاتیک با تعاملات سبک را بهبود دهید، به petite-vue نیز نگاهی بیندازید؛ این یک نسخه بهینه‌شده با حجم 6 کیلوبایتی از Vue است.

چطور کار می‌کند؟ ​

کامپوننت‌های تک فایلی، یک فرمت وابسته به فریم‌ورک هستند و باید توسط ‎@vue/compiler-sfc به جاوااسکریپت و CSS کامپایل شوند. یک SFC کامپایل شده در واقع یک ماژول جاوااسکریپت استاندارد (ES) است - یعنی با تنظیمات مناسب، می‌توانید یک SFC را مانند یک ماژول import کنید:

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

به طور معمول، تگ‌های <style> داخل کامپوننت های تک فایلی (SFCs) در طول توسعه به عنوان تگ‌های <style> اصلی درج می‌شوند تا بتوان بدون نیاز به لود مجدد، صفحه را به روز رسانی کرد. برای محصول نهایی، می‌توان آن‌ها را استخراج و در یک فایل CSS ادغام کرد.

برای درک بهتر SFC ها، می‌توانید کامپوننت های تک فایلی را درVue SFC Playground امتحان کنید.

در پروژه‌های واقعی، معمولاً کامپایلر SFC را با ابزار هایی مانند Vite یا Vue CLI (که بر اساس webpack است) ادغام می‌کنیم، و Vue ابزارهای ساخت معتبری را فراهم می‌کند تا شما بتوانید تجربه بهتری از کامپوننت‌های تک فایلی داشته باشید. جزئیات بیشتر را در بخش ابزارهای SFC بررسی کنید.

تفکیک دغدغه‌ها چه می‌شود؟ ​

بعضی از کاربران ممکن است نگران باشند که کامپوننت‌های تک‌فایلی (SFCs) وظایف مختلف را با هم ترکیب می‌کنند - وظایفی که HTML و CSS و JS باید جداگانه انجام دهند!

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

در توسعه رابط کاربری مدرن، ما متوجه شده‌ایم که به جای تقسیم کد به سه لایه بزرگ HTML و CSS و Js ، تقسیم آنها به کامپوننت‌های مستقل و سپس ترکیب آنها منطقی‌تر است. درون یک کامپوننت، تمپلیت، منطق و استایل‌های آن با هم ترکیب شده‌اند، و این ترکیب کامپوننت را منسجم‌تر و قابل نگهداری‌تر می‌کند.

توجه داشته باشید حتی اگر ایده کامپوننت‌های تک فایلی را دوست ندارید، می‌توانید با جدا کردن جاوا اسکریپت و CSS خود به فایل‌های جداگانه با استفاده از Src Imports از ویژگی‌های از پیش‌ کامپایل شده آن استفاده کنید.