مقدمة إلى script setup
كيفية ترجمة إلى setup()، والاستيرادات التلقائية، وإتاحة الارتباطات العلوية في القالب
مقدمة إلى script setup درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
Composition API أكثر نظافة
<script setup> هو صياغة نحوية مختصرة تُعالَج وقت الترجمة لـ Composition API. فهو يزيل الشيفرة التمهيدية، فتبدو مكوناتك ذات الملف الواحد كأنها JavaScript عادية مع متغيرات تفاعلية.
من setup() إلى script setup
يتطلب الشكل التقليدي export default ودالة setup() وتعليمة return صريحة. قارن ذلك بإصدار <script setup>.
<!-- classic -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>إصدار script setup
مع <script setup> لا يوجد كائن تغليف ولا تعليمة return. تُعرَض المتغيرات الموجودة في المستوى الأعلى للقالب تلقائيًا.
<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>لا حاجة إلى return صريح
يتعامل المترجم مع كل ارتباط في المستوى الأعلى — من متغيرات ودوال واستيرادات — على أنه متاح في القالب. تكتب شيفرة أقل، ولا يوجد خطر نسيان إرجاع شيء.
تتوفر الدوال ذات المستوى الأعلى أيضًا
عرّف دالة في المستوى الأعلى واربطها مباشرةً في القالب. لا حاجة إلى إرجاعها.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>تُسجَّل المكونات المستوردة تلقائيًا
في الواجهة البرمجية التقليدية، كان عليك إدراج المكونات في خيار components. أما مع <script setup>، فيكفي استيراد مكوّن ليصبح قابلًا للاستخدام في القالب.
<script setup>
import BaseButton from './BaseButton.vue'
</script>
<template>
<BaseButton />
</template>ما زال يُترجم إلى setup()
يحوّل المترجم، من الداخل، <script setup> إلى دالة setup() عادية. وتحصل على السلوك والأداء نفسيهما، لكن مع أسلوب كتابة أنظف.
إضافة TypeScript باستخدام lang ts
فعّل TypeScript بإضافة lang="ts" إلى الوسم. ويمكنك بعد ذلك تحديد أنواع المتغيرات، واستخدام الأنواع العامة مع وحدات ماكرو المترجم، والحصول على استنتاج كامل للأنواع.
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>وحدات ماكرو المترجم
تتوفر داخل <script setup> وحدات ماكرو خاصة بالمترجم مثل defineProps وdefineEmits وdefineExpose. لا يتم استيرادها، إذ يتعرف عليها المترجم. وستستكشف كل وحدة منها في الدروس القادمة.
الدمج مع كتلة script عادية
قد تحتاج أحيانًا إلى خيارات تُنفَّذ مرة واحدة في نطاق الوحدة، مثل اسم مكوّن مخصص. يمكنك إضافة كتلة <script> عادية إلى جانب <script setup>.
<script>
export default { name: 'MyComponent' }
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>لماذا تفضّل الفرق script setup
- شيفرة تمهيدية أقل — لا يوجد كائن تغليف ولا return.
- تسجيل المكونات تلقائيًا.
- أداء أفضل وقت التشغيل بفضل التحليل وقت الترجمة.
- دعم ممتاز لـ TypeScript.
إنه الأسلوب الموصى به لمكونات Vue 3 ذات الملف الواحد.
اختبار سريع
تأكد من فهمك لـ script setup.
مراجعة
تعلّمت أساسيات <script setup>:
- إنه صياغة مختصرة وقت الترجمة فوق
setup(). - لا حاجة إلى return صريح — تُعرَض الارتباطات ذات المستوى الأعلى تلقائيًا.
- تُسجَّل المكونات المستوردة تلقائيًا.
- أضف
lang="ts"لاستخدام TypeScript. - تتوفر وحدات ماكرو المترجم مثل
definePropsدون استيراد.
الأسئلة الشائعة
هل درس «مقدمة إلى script setup» مجاني؟
نعم — نص درس «مقدمة إلى script setup» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «مقدمة إلى script setup»؟
كيفية ترجمة إلى setup()، والاستيرادات التلقائية، وإتاحة الارتباطات العلوية في القالب تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «مقدمة إلى script setup»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مقدمة إلى script setup
- defineProps وdefineEmits
- defineExpose وuseAttrs
- استيراد Composables واستخدامها في script setup