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

مقدمه ​

فایل‌هایی با پسوند *.vue و به صورت مخفف SFC یک فرمت ویژه هستند که به ما اجازه می‌دهند تا الگو، منطق، و استایل یک کامپوننت 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 ها نیاز به نصب Vue دارند، اما مزایای زیادی در استفاده از آنها وجود دارد:

• ماژولار کردن کامپوننت ها ، با استفاده از سینتکس آشنای 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 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 از ویژگی‌های از پیش‌ کامپایل شده آن استفاده کنید.