Vue Macros ومقترحات المجتمع
مكتبة vue-macros، وdefineModel التجريبية، وdefineOptions، ومقترحات setupSFC
Vue Macros ومقترحات المجتمع درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماكروهات المصرّف في script setup
في <script setup>، توفّر Vue ماكروهات المصرّف، وهي دوال مثل defineProps وdefineEmits تُعالَج وقت الترجمة ولا تُستورد وقت التشغيل. وقد أضافت Vue 3.4 والإصدارات الأحدث مزيدًا منها، بينما يجرّب مشروع المجتمع vue-macros ماكروهات إضافية.
vue-macros: ساحة للتجريب
إن vue-macros مكتبة مجتمعية توفّر ماكروهات تجريبية قبل ظهورها في Vue الأساسية أو خارج نطاقها. وقد تنتقل الأفكار الناجحة أحيانًا إلى Vue الأساسية؛ فقد بدأ defineModel هنا قبل أن يصبح مستقرًا.
// vite.config
import VueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [VueMacros({ plugins: { vue: vue() } })]
})defineModel: الطريقة القديمة
قبل defineModel، كان تنفيذ v-model على مكوّن يتطلب تعريف خاصية modelValue وإصدار update:modelValue يدويًا، وكان ذلك مطولًا وعرضةً للأخطاء.
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) {
emit('update:modelValue', e.target.value)
}
</script>defineModel: مستقر في Vue 3.4
أصبح defineModel مستقرًا في Vue 3.4. وهو يعيد مرجعًا قابلًا للكتابة موصولًا تلقائيًا بالخاصية وبحدث التحديث. تؤدي قراءته إلى الحصول على القيمة، بينما يؤدي إسناد قيمة إليه إلى إصدار التحديث.
<script setup>
const model = defineModel()
// model.value reads modelValue
// model.value = x emits update:modelValue
</script>
<template>
<input v-model="model" />
</template>defineModel مسمّى ومُعرّف الأنواع
يدعم defineModel النماذج المسمّاة، مثل v-model:title، وخيارات مثل required والنوع، على غرار defineProps.
<script setup>
const title = defineModel('title', { type: String, required: true })
const count = defineModel('count', { default: 0 })
</script>تسهيل استخدام عدة نماذج v-model
باستخدام النماذج المسمّاة، يمكن للمكوّن عرض عدة ارتباطات ثنائية الاتجاه بوضوح، وهو أمر كان يتطلب سابقًا أزواجًا عديدة من الخصائص والأحداث.
<!-- parent -->
<UserForm v-model:name="name" v-model:email="email" />
<!-- UserForm script setup -->
<!-- const name = defineModel('name') -->
<!-- const email = defineModel('email') -->defineOptions
يتيح defineOptions، المستقر في Vue 3.3، ضبط خيارات المكوّن مثل name وinheritAttrs مباشرةً داخل <script setup>، مما يلغي الحاجة إلى كتلة <script> ثانية.
<script setup>
defineOptions({
name: 'UserCard',
inheritAttrs: false
})
</script>أهمية name وinheritAttrs
تساعد خاصية name للمكوّن أدوات التطوير والتكرار وعمليتي التضمين والاستبعاد في <KeepAlive>. أما inheritAttrs: false فتمنع الانتقال التلقائي للسمات، حتى تتمكن من وضع السمات على عنصر داخلي محدد باستخدام v-bind="$attrs".
<script setup>
defineOptions({ inheritAttrs: false })
</script>
<template>
<div class="wrapper">
<input v-bind="$attrs" />
</div>
</template>ماكروهات أخرى بارزة
توفّر Vue أيضًا defineExpose للتحكم فيما يستطيع مرجع الأب الوصول إليه، وdefineSlots لتعريف أنواع الفتحات، وwithDefaults لتعيين القيم الافتراضية للخصائص المعتمدة على الأنواع. ومعرفة هذه الماكروهات تكمل مجموعة أدوات <script setup>.
<script setup lang="ts">
const props = withDefaults(
defineProps<{ size?: 'sm' | 'lg' }>(),
{ size: 'sm' }
)
defineExpose({ focus })
</script>التجريبي والمستقر: اختر بحكمة
تُعدّ الماكروهات الأساسية والمستقرة، مثل defineModel وdefineOptions، آمنة للاستخدام في الإنتاج. أما تجارب vue-macros فهي مفيدة لإنشاء النماذج الأولية والاعتماد المبكر، لكن واجهاتها البرمجية قد تتغير؛ لذا استخدمها بحذر في التطبيقات التي ستُطلَق.
متابعة مقترحات المجتمع
تظهر الأفكار الجديدة في RFCs وفي vue-macros. تساعدك متابعة هذه الأفكار على توقّع الاتجاه الذي يتخذه إطار العمل، كما تتيح لك تقديم الملاحظات قبل استقرار الميزات.
اختبار سريع
اختبر مدى فهمك لماكروهات Vue.
مراجعة
تعرّفت إلى الماكروهات والمقترحات:
- يستضيف
vue-macrosماكروهات تجريبية، وينتقل بعضها إلى Vue الأساسية - يُبسّط defineModel، المستقر في الإصدار 3.4، استخدام
v-modelفي المكوّنات - تتيح النماذج المسمّاة والمُعرّفة الأنواع عدة ارتباطات ثنائية الاتجاه واضحة
- يضبط defineOptions قيمتي
nameوinheritAttrsفي<script setup> - فضّل الماكروهات المستقرة في الإنتاج، وتعامل مع التجريبية بحذر
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 42
- الدروس
- 156
الأسئلة الشائعة
هل درس «Vue Macros ومقترحات المجتمع» مجاني؟
نعم — نص درس «Vue Macros ومقترحات المجتمع» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «Vue Macros ومقترحات المجتمع»؟
مكتبة vue-macros، وdefineModel التجريبية، وdefineOptions، ومقترحات setupSFC تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «Vue Macros ومقترحات المجتمع»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Vue Vapor Mode: تحسين وقت الترجمة
- منظومة Vite: الإضافات وأدوات التطوير
- Vue Macros ومقترحات المجتمع
- اختيار حزمة Vue المناسبة لعام 2025 وما بعده