למד כיצד לעבור מ-API של Options ל-Composition API ב-Vue 3.

מכיוון שיוצרי Vue הכריזו ש-Vue 2 יגיע לסוף החיים עד ה-31 בדצמבר 2023, מפתחים מוזמנים לעבור ל-Vue 3.

עם המעבר הזה מגיע ה-Composition API, תכונה שמציעה גישה מודולרית, הצהרתית ובטוחה יותר לבניית יישומי Vue.

מהו ה-Composition API?

ה-Composition API מייצג שינוי פרדיגמה בכתיבת רכיבי Vue מ האובייקט Options. סגנון פיתוח זה מאמץ גישה הצהרתית יותר, ומאפשר לך להתמקד בבניית אפליקציית Vue שלך ​​תוך הפשטה של ​​פרטי היישום.

מוטיבציה ל-Composition API

יוצרי Vue זיהו את האתגרים בעת בניית יישומי אינטרנט מורכבים עם האובייקט Options. ככל שהפרויקטים גדלו, ניהול ההיגיון של הרכיב הפך פחות מדרגי וקשה יותר לתחזוקה, במיוחד בסביבות שיתופיות.

גישת האובייקטים המסורתית של Options הביאה לעתים קרובות למאפיינים רבים של רכיבים, מה שהפך את הקוד למאתגר להבנה ולתחזוקה.

בנוסף, שימוש חוזר בלוגיקת רכיבים על פני רכיבים שונים הפך למסורבל. ההיגיון המפוזר בתוך ווים ושיטות שונות של מחזור חיים הוסיף גם מורכבות להבנת ההתנהגות הכוללת של רכיב.

היתרונות של ה-Composition API

ה-Composition API מביא מספר יתרונות על פני Options API.

instagram viewer

1. ביצועים משופרים

Vue 3 מציגה מנגנון עיבוד חדש בשם מערכת התגובתיות מבוססת פרוקסי. מערכת זו מספקת ביצועים טובים יותר על ידי הפחתת צריכת זיכרון ושיפור תגובתיות. מערכת התגובתיות החדשה מאפשרת ל-Vue 3 לטפל בעצי רכיבים ענקיים יותר ביעילות רבה יותר.

2. גודל חבילה קטן יותר

הודות לבסיס הקוד המותאם ולתמיכה ברעד עצים, ל-Vue 3 יש גודל חבילה קטן יותר מ-Vue 2. הקטנה זו בגודל החבילה מובילה לזמני טעינה מהירים יותר ולשיפור הביצועים.

3. ארגון קוד משופר

על ידי מינוף ה-API של Composition, אתה יכול לארגן את הקוד של הרכיב שלך לפונקציות קטנות יותר הניתנות לשימוש חוזר. זה מקדם הבנה ותחזוקה טובים יותר, במיוחד עבור רכיבים גדולים ומורכבים.

4. שימוש חוזר ברכיבים ופונקציות

ניתן לעשות שימוש חוזר בפונקציות קומפוזיציה בקלות על פני רכיבים שונים, מה שמקל על שיתוף קוד ויצירת ספרייה של פונקציות הניתנות לשימוש חוזר.

5. תמיכה טובה יותר ב-TypeScript

ה-Composition API מספק תמיכה מקיפה יותר ב-TypeScript, המאפשרת הסקת סוג מדויקת יותר וזיהוי קל יותר של שגיאות הקשורות לסוג במהלך הפיתוח.

השוואה בין אובייקט Options ל-Composition API

עכשיו כשאתה מבין את התיאוריה מאחורי ה-API של Composition, אתה יכול להתחיל להשתמש בו בפועל. כדי להבין את היתרונות של ה-API של Composition, בואו נשווה כמה היבטים מרכזיים של שתי הגישות.

נתונים ריאקטיביים ב-Vue 3

נתונים ריאקטיביים הם מושג בסיסי ב-Vue המאפשר לשינויי נתונים באפליקציה שלך להפעיל עדכונים בממשק המשתמש באופן אוטומטי.

Vue 2 ביססה את המערכת הריאקטיבית שלה על Object.defineProperty שיטה והסתמכו על אובייקט נתונים המכיל את כל המאפיינים התגובתיים.

כאשר הגדרתם מאפיין נתונים עם אפשרות הנתונים ברכיב Vue, Vue עטפה אוטומטית כל מאפיין באובייקט הנתונים ב-getters ו-seters, תכונה חדשה של ECMA Script (ES6).

מגברים וקובעים אלה עקבו אחר תלות בין מאפיינים ועדכנו את ממשק המשתמש כאשר שינית מאפיין כלשהו.

הנה דוגמה לאופן שבו אתה יוצר נתונים תגובתיים ב-Vue 2 עם האובייקט Options: