כל הכבוד! הצלחתם לכתוב כמה דוגמאות ב Vue ואתם מרגישים שאתם מוכנים לדבר האמיתי. לפני שתצללו לכתיבת המערכת הגדולה הראשונה שלכם אני רוצה לשתף בפוסט זה 5 טיפים שיעזרו לכם להתקדם ב Vue גם אחרי שלב הלימוד:

1. כתבו נכון

ל Vue יש Style Guide רשמי שבנוי מ-4 חלקים בסדר חשיבות יורד ואתם יכולים למצוא אותו בקישור כאן:

https://vuejs.org/style-guide/

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

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

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

3. שימוש במאפיין key בלולאות.

4. לא מערבבים if ו for.

5. תמיד להשתמש ב scoped בהגדרת בלוק style ובבלוק script setup כדי ליצור קומפוננטות.

2. כתבו מדויק

את רוב הדברים ב Vue אפשר לממש בצורה מדויקת ועם מעט Boilerplate Code אם בכלל. הדיוק הוא חשוב שכן הוא עוזר להגיע לביצועים יותר טובים ולקוד שקל יותר לתחזק. דוגמה מאותו Style Guide היא שבמקום להגדיר משתנה כזה:

const price = computed(() => {
  const basePrice = manufactureCost.value / (1 - profitMargin.value)
  return basePrice - basePrice * (discountPercent.value || 0)
})

נעדיף להגדיר שלושה משתנים מחושבים כך:

const basePrice = computed(
  () => manufactureCost.value / (1 - profitMargin.value)
)

const discount = computed(
  () => basePrice.value * (discountPercent.value || 0)
)

const finalPrice = computed(() => basePrice.value - discount.value)

או בדוגמה נוספת במקום להגדיר:

<template>
  <button>×</button>
</template>

<style scoped>
button {
  background-color: red;
}
</style>

נעדיף להשתמש בכתיב המדויק יותר:

<template>
  <button class="btn btn-close">×</button>
</template>

<style scoped>
.btn-close {
  background-color: red;
}
</style>

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

3. העברת מידע מפורשת

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

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

4. שימו לב לעדכונים בקומפוננטות

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

לאורך זמן מעקב אחרי updates ומודעות לשאלה "מתי הקומפוננטה מתעדכנת" יעזור לכם לכתוב מערכות טובות ויעילות יותר.

5. לכו ללמוד ספריות

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

אני ממליץ ללמוד לעומק לפחות את הספריות הבאות:

1. הספרייה nuxt שהיא פריימוורק לפיתוח יישומי Full Stack ב Vue ותתן לכם התחלה מצוינת לפרויקט Vue הבא שלכם.

2. הספריה Vue Router שמאפשרת פיתוח Single Page Apps בצד לקוח.

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

4. הספריה Tanstack Query שעוזרת למשוך מידע משרתים ולנהל אותו בתוך יישום Vue.