Home-theater-designers
يقدم Vue.js ، وهو إطار عمل JavaScript مشهور لتصميم واجهات المستخدم ، ميزات وتحسينات آسرة مع كل إصدار جديد.
لا يُعد Vue 3.3 استثناءً لأنه يقدم مجموعة كاملة من الوظائف الجديدة.
1. وحدات الماكرو: دعم الأنواع المعقدة والمستوردة
تتيح لك وحدات الماكرو ، وهي أداة فعالة في Vue.js ، تحديد مقتطفات القالب القابلة لإعادة الاستخدام. في Vue 3.3 ، تكتسب وحدات الماكرو دعمًا للمكونات المستوردة والأنواع المعقدة ، مما يعزز تعدد استخداماتها وقابليتها لإعادة الاستخدام.
اجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى
خذ بعين الاعتبار المثال التالي:
<template>
<macro-example>
<imported-component />
<complex-type :data="complexData" />
</macro-example>
</template>
<macro name="macro-example">
<div>
<slot></slot>
</div>
</macro>
في مقتطف الشفرة أعلاه ، ملف الماكرو المثال يستوعب الماكرو أي محتوى يتم وضعه داخله ، بما في ذلك المكونات المستوردة مثل
2. المكونات العامة: دعم أنواع البيانات المختلفة
يقدم Vue 3.3 دعمًا للمكونات العامة ، مما يتيح إنشاء مكونات قابلة لإعادة الاستخدام يمكنها التفاعل بسلاسة مع أنواع البيانات المتنوعة. تثبت هذه الميزة قيمة خاصة عند تطوير المكونات التي تحتاج إلى التعامل مع أنواع البيانات المختلفة دون المساس بسلامة النوع.
فيما يلي مثال على مكون عام:
<template>
<div>
<slot :item="data"></slot>
</div>
</template>
<script>
export default {
props: {
data: {
type: null, // Accepts any type
required: true,
},
},
};
</script>
ضمن الكود المقدم ، فإن ملف بيانات تم تعيين نوع الدعامة على باطل ، مما يمكنها من قبول أي نوع من البيانات. وبالتالي ، يمكن لهذا المكون التعامل بسلاسة مع أنواع مختلفة من البيانات مع ضمان سلامة النوع عند استخدام الدعامة داخل المكون.
3. تحسين بناء الجملة لتعريف الحصص
ال عرّفوا الحدود تسمح الوظيفة بإعلان صريح عن الأحداث المنبعثة من المكون. في Vue 3.3 ، تتلقى هذه الوظيفة تحديثًا مريحًا لبناء الجملة ، مما يعزز قابلية قراءة الكود. يمكنك الآن تحديد Emits باستخدام تدوين كائن ، مما يوفر تمثيلًا أوضح للأحداث المنبعثة داخل المكون.
خذ بعين الاعتبار المثال التالي:
ما هي كلمة مرور wifi الخاصة بي android
<script>
import { defineEmits } from 'vue';
export default {
emits: defineEmits(['click', 'input']),
};
</script>
في مقتطف الشفرة هذا ، يكون ملف ينبعث الملكية توظف عرّفوا الحدود تعمل جنبًا إلى جنب مع مجموعة من أسماء الأحداث. يضمن هذا الأسلوب إعلانًا موجزًا وواضحًا للأحداث المنبعثة من المكون ، مما يزيد من قابلية قراءة الكود.
4. فتحات مطبوعة مع تحديد الفتحات
يقدم Vue 3.3 وظيفة جديدة تسمى تحديد الفتحات يسمح بتحديد دقيق لأنواع الفتحات داخل أحد المكونات. تدعم هذه الميزة أمان النوع في المكونات وتسهل دعم IDE المحسّن لمحتوى الفتحة:
<template>
<div>
<slot name="header" :data="headerData" />
<slot :data="defaultData" />
</div>
</template>
<script>
import { defineSlots } from 'vue';
export default {
slots: defineSlots({
header: {
data: {
type: Object,
required: true,
},
},
default: {
data: {
type: String,
required: false,
default: 'Default Slot Content',
},
},
}),
};
</script>
ضمن مقتطف الشفرة ، ملف فتحات الملكية تستخدم تحديد الفتحات وظيفة لتحديد أنواع الفتحات المستخدمة في المكون. يتيح ذلك للمطورين إمكانية الفحص القوي للنوع والإكمال التلقائي مع الاستفادة من الفتحات.
5. الوصول المبسط إلى الدعائم التفاعلية
ال الدعائم التفاعلية تعمل ميزة التدمير المقدمة في Vue 3.3 على تبسيط الوصول إلى الدعائم التفاعلية ضمن وظيفة إعداد المكون. يعمل هذا التحسين على تبسيط عملية الوصول إلى الدعائم التفاعلية ، مما يعزز قابلية قراءة الكود وإيجازه.
على سبيل المثال:
<script>
import { reactive } from 'vue';
export default {
props: {
user: Object,
},
setup(props) {
const { user } = props; // Destructuring reactive props
// Utilizing the destructured user object
console.log(user.name);
// ...
},
};
</script>
يدمر مقتطف الشفرة هذا ملف مستخدم prop ضمن وظيفة الإعداد ، مما يتيح الوصول المباشر إلى خصائصه. هذا يبسط الكود ويعزز قابليتها للقراءة.
6. حدد النموذج: تبسيط مكونات الربط ثنائية الاتجاه
التجريبية تعريف النموذج تعمل الوظيفة داخل Vue 3.3 على تبسيط ملف إنشاء مكونات ربط ثنائية الاتجاه . يوفر نهجًا مناسبًا لتعريف نموذج القيمة دعامة و تحديث: modelValue حدث شائع الاستخدام في ارتباطات النموذج الخامس.
ضع في اعتبارك هذا المثال:
<script>
import { defineModel } from 'vue';
export default {
props: {
modelValue: String,
'onUpdate:modelValue': Function,
},
emits: ['update:modelValue'],
setup(props, { emit }) {
const model = defineModel(() => [props.modelValue, emit('update:modelValue')]);
// Accessing the model.value and model.update function
console.log(model.value);
model.update('New value');
// ...
},
};
</script>
يحدد مقتطف الشفرة هذا ملف نموذج القيمة دعامة و تحديث: modelValue حدث باستخدام حدد النموذج وظيفة. هذا يبسط إنشاء مكونات ربط ثنائية الاتجاه ، مما يجعل الكود أكثر إيجازًا وأسهل في القراءة.
إطلاق العنان لإمكانيات التنمية السلسة
يقدم Vue 3.3 مجموعة من الميزات والتحسينات الجذابة ، مما يعزز تجربة تطوير Vue.js. تتضمن التحديثات دعمًا للأنواع المستوردة والمعقدة في وحدات الماكرو والمكونات العامة والميزات التجريبية مثل الدعائم التفاعلية.
توفر هذه الإضافات مزيدًا من المرونة ونوع الأمان والراحة أثناء إنشاء تطبيقات Vue.