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. תחביר משופר עבור defineEmits
ה defineEmits הפונקציה מאפשרת הצהרה מפורשת של האירועים הנפלטים על ידי רכיב. ב-Vue 3.3, פונקציה זו מקבלת עדכון תחביר ארגונומי, המשפר את קריאת הקוד. כעת תוכל להגדיר פליטות באמצעות סימון אובייקט, המספק ייצוג ברור יותר של האירועים הנפלטים בתוך הרכיב.
שקול את הדוגמה הבאה:
<script>
import { defineEmits } from 'vue';
export default {
emits: defineEmits(['click', 'input']),
};
</script>
בקטע קוד זה, ה- פולט נכס מעסיק את defineEmits לתפקד יחד עם מערך של שמות אירועים. גישה זו מבטיחה הצהרה תמציתית ומובנת של האירועים הנפלטים של הרכיב, ומשפרת עוד יותר את קריאת הקוד.
4. חריצים מוקלדים עם defineSlots
Vue 3.3 מציגה פונקציה חדשה בשם defineSlots המאפשר מפרט מדויק של סוגי חריצים בתוך רכיב. תכונה זו מחזקת את בטיחות הסוג ברכיבים ומאפשרת תמיכת 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>
בתוך קטע הקוד, ה- חריצים נכס מנצל את defineSlots פונקציה כדי לציין את סוגי החריצים המשמשים ברכיב. זה מעניק למפתחים בדיקת סוגים חזקים והשלמה אוטומטית תוך מינוף משבצות.
5. גישה פשוטה לאביזרים תגובתיים
ה אביזרים תגובתיים תכונת destructure שהוצגה ב-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. defineModel: פישוט רכיבי כריכה דו-כיוונית
הניסיוני defineModel הפונקציה בתוך Vue 3.3 מפשטת את יצירת רכיבי כריכה דו-כיוונית . הוא מספק גישה נוחה להגדרת ה modelValue תמיכה ו update:modelValue אירוע נפוץ בכריכות דגם v.
שקול את הדוגמה הזו:
<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 תמיכה ו update:modelValue אירוע באמצעות defineModel פוּנקצִיָה. זה מפשט את היצירה של רכיבי כריכה דו-כיווניים, מה שהופך את הקוד לתמציתי יותר וקל יותר לקריאה.
שחרור אפשרויות פיתוח חלקות
Vue 3.3 מציגה מערך של תכונות ושיפורים מרתקים, מה שמשפר את חווית הפיתוח של Vue.js. העדכונים כוללים תמיכה בסוגים מיובאים ומורכבים בפקודות מאקרו, רכיבים גנריים ותכונות ניסיוניות כמו אביזרים תגובתיים.
תוספות אלו מציעות גמישות מוגברת, בטיחות סוג ונוחות בזמן שאתה בונה את יישומי ה-Vue שלך.