VUE 3
-
למדתי ועבדתי בVUE 2. אני מבין שיש כמה שינויים בגרסה 3 הבאה עלינו מתישהו לטובה שידרשו קצת כאב ראש. אבל בינתיים העולם עובד עדיין עם 2 אז הכל טוב.
אמנם, במסגרת ההכנות למעבר לVUE3 אני מבין שאחד החידושים המשמעותים שם נקרא פונקציות קומפוזיציה של API.
מישהו יכול לתרגם לי את זה לעברית פשוטה ומתומצתת במקום שאשבור הרבה את הראש?
אני מבין שיש כבר כיום תוספים שמכניסים את זה בVUE2.
תודה רבה -
-
@davidnead אתה כנראה עקשן גדול
כמה פעמים ב-24 הימים האחרונים חשבתי על הבקשה שלך, כי האמת היא שאשמח ללמוד את הנושא בעצמי, ואז הייתי עונה לך, אבל בינתיים לא יצא לי ללמוד.
אבל חשבתי שמן הסתם אחרי שעבר זמן כל כך גדול הספקת כבר לשבור את הראש בעצמך... כנראה שאתה שומר על הראש בקנאות...התיעוד בעברית על טכנולוגיות חדשות כמעט לא קיימת
אם גם אנגלית בסדר, אז אני מאמין שתמצא הרבה.
התיעוד הרשמי די טוב בד"כ.
https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api -
@davidnead אתה כנראה עקשן גדול
כמה פעמים ב-24 הימים האחרונים חשבתי על הבקשה שלך, כי האמת היא שאשמח ללמוד את הנושא בעצמי, ואז הייתי עונה לך, אבל בינתיים לא יצא לי ללמוד.
אבל חשבתי שמן הסתם אחרי שעבר זמן כל כך גדול הספקת כבר לשבור את הראש בעצמך... כנראה שאתה שומר על הראש בקנאות...התיעוד בעברית על טכנולוגיות חדשות כמעט לא קיימת
אם גם אנגלית בסדר, אז אני מאמין שתמצא הרבה.
התיעוד הרשמי די טוב בד"כ.
https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-apiזו פרשנות אחת. פרשנות אחרת היא שהנחתי לנושא למשך שבועיים כי עסקתי בדברים אחרים. וכשחזרתי לזה - נתקלתי באותה בעיה. שברתי את הראש, קראתי קצת מדריכים, הבנתי אפילו איך משתמשים בסיסית בדבר הזה, אבל טרם הבנתי את התועלת ומה זה נותן לי על פני VUE2.
אני נותן לך לבחור מבין הפרשנויות...
את התיעוד של VUE אני מכיר כמובן. רוב הטקסטים0 שקראתי עוסקים באיך זה עובד, אבל לא בבשביל מה זה. מי שכן עוסק, אני לצערי לא הבנתי. -
אם אתה מעדיף סרטון: https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api
כמובן, שאם הייתי יודע התשובה הייתי עונה במקום לשלוח מראי מקומות...
-
אם אתה מעדיף סרטון: https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api
כמובן, שאם הייתי יודע התשובה הייתי עונה במקום לשלוח מראי מקומות...
מראי מקומות זה גם טוב אם לא יודעים את התשובה, זה מה שביקשתי. אבל רק לוודא שבאמת המראי מקומות נותנים את התשובה.
טוב, אם אין אני לי מי לי. בסוף הצלחתי למצוא מאמר אחד שהוא גם בהיר ומתומצת, וגם מתמקד בנקודות שעונות על השאלה. הנה לטובת המעוניינים:
https://ronini.dev/blog/composition-api-what-is-it-and-why/סיכום קצר של מה שהבנתי:
בגדול, אתה משתחרר מהמחויבות למבנה האובייקט הישן והטוב של VUE (data, methods, nounted, compude, watch וכו'), ומשוחרר לכתוב כמעט JS רגיל. את הפונקציונליות המיוחדת שקיבלת מהמבנה אתה מקבל כעת באמצעות ייבוא מיוחד לפי הצורך.איך זה מתבצע? אתה כותב JS רגיל. אם אתה רוצה שמשתנה מסויים יהיה בסטייט - אתה מייבא פונקציית סטייט ורושם אותו במפורש. אם אתה רוצה שמשתנה אחר יחזיר קומפיוטד-אתה מייבא את אופציית הקומפיוטד מVUE ומגדיר את זה במפורש. וכו'.
שזה אומר:
- אתה כבר לא צריך את this כדי ליצור ריאקטיביות או "לרשום" אובייקטים שונים למעקב של VUE. (ומשאיר לthis את ההתנהגות הקפריזית הרגילה של JS)
- אתה כבר לא צריך לקבץ את קטעי הקוד של המידע והפונקציונליות לפי החלוקה הישנה של דאטה, מתודות, קומפיוטד וכדומה. אתה יכול למקם את הקוד איך שנוח לך.
- כשאתה צריך קוד לשימוש חוזר - אתה לא מייבא מיקסינג עלום שלא ברור מה הוא מכיל, אלא מייבא במפורש כל מה שאתה צריך מקובץ JS רגיל שכתבת בנפרד.
החסרון הגדול בעיני:
אתה צריך לעשות ידני את כל מה שVUE עשתה לך לבד עד עכשיו. בשביל מה יש VUE? זה גם מאוד מלכלך את הקוד.בקיצור יש פה יתרונות - שהם לא תמיד יתרונות, וחסרונות - שאולי שווים את זה. וכמו כל דבר, צריך להשתמש ולראות פרקטית מה נוח יותר.
לפחות הבנתי, וכשכתבתי את ההסבר פה - עוד יותר הבנתי ;-). מקוה שהועלתי למישהו - ואם לא - תכתבו לי ואשמח לערוך את ההסבר לתועלת אלו שיתעניינו מתישהו.
עריכה:
דבר אחד בטוח: את עקומת הלמידה - שמפתחי VUE כ"כ גאים בה - זה כעת מדרדר. -
@davidnead, אני מרגיש שיש פה בלבול ומרמור מיותר...
Vue 3 אינה מסלקת את ה-API הישן ("Options API"), אלא רק מוסיפה עוד API חדש בשם "Composition API".
עם גירסה 3 אפשר להמשיך לכתוב Vue בדיוק באותה צורה ישנה וידועה, ועדיין להנות מהרבה יתרונות חדשים: ביצועים יותר טובים, פתרון ה-caveats, ועוד הרבה יכולות חדשות. (אכן, יש כמה breaking changes קטנים אבל זה סביר ומקובל בעדכון שקורה אחת לכמה שנים).
עכשיו בחזרה ל-Composition API החדש, אני אישית משוכנע שיש בזה הרבה יתרונות, בין השאר זה נותן אפשרות לכתוב קוד יותר מאורגן ונקי ו"יבש" (DRY). אני לא ינסה לשכנע אותך כי זה לא מאוד חשוב, רק הייתי מציע לך להתנסות קצת לדעת לפחות במה מדובר.
החסרון הגדול בעיני:
אתה צריך לעשות ידני את כל מה שVUE עשתה לך לבד עד עכשיו. בשביל מה יש VUE? זה גם מאוד מלכלך את הקוד.טעות היא בידך... זה פשוט ממומש אחרת, הרעיונות אותן רעיונות.
במקום לסמוך על מנגנון קסם שמזהה שמות של מאפיינים באופן אוטומטי (ונכשל למשל אם יש typo), אתה כותב קוד יותר הצהרתי, מייבא את המודול ומשתמש איפה שצריך. למי שיודע Vue ברמה בסיסית, לא אמור להיות בעיה להבין את הקונספט בזמן מועט.אגב, שיטת המודולים מביא איתה יתרון נוספת, מכיון שמייבאים רק את החלקים מהספרייה שרוצים, אפשר להשתמש עם כלי כמו Webpack שיכול לעשות Treeshaking לספרייה ולהוציא כל מה שאינו נצרך, שזה מביא לתוצאה של bundle יותר קטן.
אני לא חושב שיש צורך לרוץ ולעדכן פרויקטים קיימים, אבל אם מתחילים פרויקט חדש, לרוב לא יהיה סיבה למה לא לבחור בגירסה החדשה. כל חבילה מתוחזקת שקצת מכבדת את עצמה, כבר אמורה לתמוך בגירסה 3 מזמן, או לכה"פ הם יציינו חחלופה טובה. (ואם לא, זה לבד כבר סיבה לא להשתמש איתה גם לא בפרויקט ישן...).
-
@davidnead, אני מרגיש שיש פה בלבול ומרמור מיותר...
Vue 3 אינה מסלקת את ה-API הישן ("Options API"), אלא רק מוסיפה עוד API חדש בשם "Composition API".אין לי מושג היכן ראית בלבול וכ"ש מרמור. אולי שייכת אותי בטעות לכת ממורמרי VUE3 שעבורם נכתב המשפט הנ"ל (לא מסלקת וכו') אינספור פעמים ברשת, אני לא כתבתי בשום מקום שלא ניתן להמשיך לכתוב בצורה הישנה. סך הכל ניסיתי להבין את צורת השימוש החדשה - שהיא רחוקה ממה שהתרגלתי עד היום, את יתרונותיה וחסרונותיה.
החסרון הגדול בעיני:
אתה צריך לעשות ידני את כל מה שVUE עשתה לך לבד עד עכשיו. בשביל מה יש VUE? זה גם מאוד מלכלך את הקוד.טעות היא בידך... זה פשוט ממומש אחרת, הרעיונות אותן רעיונות.
במקום לסמוך על מנגנון קסם שמזהה שמות של מאפיינים באופן אוטומטי (ונכשל למשל אם יש typo), אתה כותב קוד יותר הצהרתי, מייבא את המודול ומשתמש איפה שצריך. למי שיודע Vue ברמה בסיסית, לא אמור להיות בעיה להבין את הקונספט בזמן מועט.אתה כביכול שולל את דבריי, אך המשפט שכתבת
במקום לסמוך על מנגנון קסם שמזהה שמות של מאפיינים באופן אוטומטי (ונכשל למשל אם יש typo), אתה כותב קוד יותר הצהרתי,
חוזר עליהם במדויק. יתכן שלא התנסחתי נכון, בוודאי שלא התכוונתי שצריך לממש לבד את המנגהון של VUE. אבל כן התכוונתי למה שכתבת, שכעת צריך לעשות לבד את מה שהמנגנון קסם הזה עשה.
אני מבין את היתרונות של לנהל יותר את הקוד ולכתוב רק מה שאתה צריך - אבל זה הצד השני של מטבע מאוד קלאסית שהצד האחר שלה הוא פחות אינטואיטיביות ונוחות. זה פה בהחלט ויתור על משהו אם עוזבים את התחביר הקודם.בסה"כ אני חושב שמה שכתבת תואם די במדויק למה שהבנתי וכתבתי. ואתה אומר שאתה כבר גילת שעבורך זה יותר נוח - מעולה שמח לשמוע, אני מקוה שגם אני אמצא את זה כך.
בינתיים קיבלתי למייל פוסט של ינון פרק, שמפרט בדיוק על הנושא הזה. אז כעת כבר יש משהו בעברית
. למדתי שם על ההבדל בין השיטה הראשונה של פונקציות קומפוזיציה שהכל נכתב בתוך פונקציית setup, לבין החדשה יותר של script setup. זה היה נשמע קצת יותר טוב, משאיר קוד יותר נקי, וכבר יותר מאוזן בין יעילות וניהול לאינטואיטיביות וקוד נקי/חסכוני.אני לא חושב שהפוסט הזה מופיע באיזשהו מקום מלבד במיל אז ביקשתי את רשותו להעתיק לפה ואני ממתין לתשובתו. לדעתי זה פוסט מועיל.
-
-
@davidnead
https://www.tocode.co.il/blog/2021-11-vue-component-evolutionאה, יפה. אני מאוד אוהב אותו, לדעתי יש לו המון חומרים טובים בעברית שלגבי חלקם קצת חבל שהוא לא עושה בהם סדר.
-
@davidnead אמר בVUE 3:
למדתי שם על ההבדל בין השיטה הראשונה של פונקציות קומפוזיציה שהכל נכתב בתוך פונקציית setup, לבין החדשה יותר של script setup. זה היה נשמע קצת יותר טוב, משאיר קוד יותר נקי, וכבר יותר מאוזן בין יעילות וניהול לאינטואיטיביות וקוד נקי/חסכוני.
אכן, תוספת מאוד חשוב (רציתי להזכיר את זה בפוסט ושכחתי). אני חושב שזה קצת "סתירה" לכל הרעיון של ה-composition api, אבל זה בהחלט יכול לעזור הרבה, זה היה experimental עד לאחרונה.
פחות קוד הוא הרבה פעמים יתרון גדול (פחות קוד = פחות באגים, לא? ).
