المكونات أحادية الملف ​

مقدمة ​

مكونات vue أحادية الملف ( التي تُسمَّى أو تُعرف أيضا باسم ملفات *.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 SFC هو امتداد طبيعي للثلاثي الكلاسيكي من HTML و CSS و JavaScript . تقوم الكُتل <template> و <script> و <style> بتغليف و تجميع عرض و منطق و تنسيق المُكون في نفس الملف. الصيغة الكاملة مُحددة في مواصفات صيغة SFC.

لماذا SFC ​

بينما تتطلب المكونات أحادية الملف مرحلة بناء، هنالك العديد من الفوائد بالمُقابل:

• صياغة مُكونات مُركبة باستخدام صيغة HTML، CSS و JavaScript المُعتادة.
• تجميع الاهتمامات ( الجوانب و العوامل املختلفة التي يجب مُراعاتها ) المُترابطة بطبيعتها.
• قوالب مُصرفة مُسبقا بدون تكلفة التصريف أثناء التشغيل.
• CSS ذات نطاق المُكون ( التنسيق أو النمط يكون مُحدد بشكل خاص للمُكون ).
• صياغة أكثر سلاسة عند العمل مع الواجهة التركيبية لبرمجة التطبيقات
• المزيد من تحسينات مرحلة الترجمة عن طريق تحليل متقاطع بين القالب و المنطق البرمجي
• دعم مُحرر بيئة التطوير المتكاملة مع إكمال تلقائي و فحص نوع البيانات لتعبيرات القوالب.
• دعم ميزة استبدال الوحدات النمطية الحية أثناء تشغيل التطبيق دون الحاجة إلى أي تهيئة إضافية.

المكونات أحادية الملف من المميزات المحددة لـ Vue كإطار عمل، و يُعتبر النهج الموصى به لاستخدام Vue في السيناريوهات التالية:

• التطبيقات أحادية الصفحة ( SPA )
• مولدات مواقع الويب الساكنة ( SSG )
• أي واجهة أمامية غير بسيطة حيث يمكن تبرير استخدام عملية بناء المشروع لتوفير تجربة تطوير أفضل

ومع ذلك ، ندرك أن هناك سيناريوهات يمكن أن تبدو فيها مكونات أحادية الملف و كأنها مُبالغة. هذا هو السبب في أنه لا يزال من الممكن استخدام Vue عبر JavaScript بشكل عادي بدون مرحلة بناء. إذا كنت تبحث فقط عن تحسين HTML إلى حد كبير من خلال التفاعلات الخفيفة ، فيُمكنك أيضا إلقاء نظرة على petite-vue ، وهي نُسخة محدودة بحجم 6 كيلو بايت من Vue محسّنة من أجل تعزيز التدرج

كيف تعمل ​

المٌكون أحادي الملف لـ vue هو تنسيق ملف خاص بإطار العمل و يجب تصريفه مُسبقا بواسطة @vue/compiler-sfc إلى standard JavaScript و CSS. المُكون أحادي الملف (SFC) المُجمع هو standard JavaScript (ES) module (ES) - مما يعني أنه مع الإعداد المُناسب لمرحلة البناء، يُمكنك استيراد المكون أحادي الملف (SFC) كوحدة:

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

عادة تُدرج وسوم <style> داخل المكونات أحادية الملف كوسوم <style> الأصلية أثناء التطوير لدعم التحديثات النشطة. أما في مرحلة الإنتاج يمكن استخراجها ودمجها في ملف CSS واحد.

يمكنك تجربة المكونات أحادية الملف واستكشاف كيفية تصريفها في Vue SFC Playground.

في المشاريع الفعلية ، ندمج عادة مُترجم SFC مع أداة بناء مثل Vite أو Vue CLI (التي تعتمد على webpack) ، وتوفر Vue أدوات تخطيط رسمية لبدء العمل مع ملفات SFC بأسرع ما يمكن. تحقق من المزيد من التفاصيل في قسم أدوات SFC.

ماذا عن فصل نوع الشيفرات؟ ​

بعض المستخدمين القادمين من خلفية تطوير الويب التقليدية قد يكون لديهم القلق من أن المكونات أحادية الملف تخلط نوع شيفرات مختلفة في نفس المكان - والتي كان من المفترض أن تفصلها HTML / CSS / JS!

للإجابة على هذا السؤال، من المهم بالنسبة لنا الاتفاق على أن فصل نوع الشيفرات لا يعني فصل أنواع الملفات. الهدف النهائي من مبادئ الهندسة هو تحسين قابلية صيانة الشيفرة البرمجية. فصل نوع الشيفرات عند تطبيقه بشكل متعصب كفصل أنواع الملفات، لا يساعدنا في تحقيق هذا الهدف في سياق تطبيقات الواجهة الأمامية المعقدة بشكل متزايد.

في تطوير واجهة المستخدم الحديثة ، وجدنا أنه بدلاً من تقسيم الشيفرة البرمجية إلى ثلاث طبقات ضخمة تتشابك مع بعضها البعض ، فمن المنطقي تقسيمها إلى مكونات غير مترابطة وتشكيلهم معا. داخل مُكون، فإن قالبه ومنطقه وأنماطه مقترنة بطبيعتها، ويجعل تجميعهم معًا المكون أكثر تماسكًا وقابلية للصيانة.

لاحظ أنه حتى لو لم تكن تحب فكرة المكونات أحادية الملف، يمكنك الاستفادة من ميزات إعادة التحميل السريع والتجميع المسبق عن طريق فصل JavaScript و CSS إلى ملفات منفصلة باستخدام Src Imports.