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

1. מה פתאום להתחיל משגיאות

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

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

2. שגיאות בניה

סוג השגיאות הראשון והקל ביותר לזיהוי הוא שגיאות בבניית התוכנית מקובץ ה SFC. בשביל המשחק בואו נמחק בבלוק ה template את התגית הסוגרת לאחת מתגיות ה a כלומר נקבל:

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />

    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

שגיאות נוספות מסוג זה שתוכלו לייצר:

1. מחיקת הערך 1.5em; משורת ה CSS בבלוק style.

2. מחיקת המרכאה הסוגרת של מאפיין alt בתבנית (או כל מאפיין אחר).

שגיאות בניה הן השגיאות שהכי קל לראות. בעבודה שוטפת ב Vue אנחנו נראה אותן על מסך הדפדפן ברגע שאנחנו שומרים קובץ עם בעיה בבנייה (אבל רק עד שנרענן את העמוד בדפדפן, אחרי ריענון מופיע בדפדפן מסך ריק). בנוסף הן מופיעות בחלון שורת הפקודה שמריץ את npm run dev, והן מופיעות בתור פס אדום בתוך ה VS Code.

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

3. שגיאות TypeScript

לא דיברנו על זה עדיין אבל מאחר ואנחנו עובדים ב TypeScript יהיו מצבים שנראה שגיאות בכלי הפיתוח שאומנם לא יופיעו בדפדפן בצורה ישירה אבל כן יגרמו להתנהגות מוזרה של העמוד. מקור שגיאות אלה אינו TypeScript אלא להיפך, זה TypeScript שעוזר לנו לזהות את השגיאה. בואו נראה דוגמה. בקוד של App.vue אני מעדכן את התבנית ומשנה את המאפיין msg של אלמנט HelloWorld ל sg באופן הבא:

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld sg="Vite + Vue" />
</template>

מעבר לדפדפן ואנחנו רואים שתוכן העמוד מופיע וגם אין שגיאות בכלי הפיתוח אבל משהו מוזר כאן - ההודעה Vite + Vue נעלמה. לא דיברנו עדיין על החיבור בין קומפוננטות ועל מה זה בדיוק HelloWorld, אבל כבר אנחנו יכולים להבין שזה משהו שמשתמשים בו כמו שמשתמשים בכל אלמנט HTML ושמעבירים אליו פרמטרים בכתיב ה Attributes הרגיל של HTML. טעות בשם של מאפיין תגרום לדברים לא לעבוד או לעבוד אחרת ממה שהתכוונו.

בתוך מסך ה IDE טייפסקריפט מזהה טעויות כאלה ומסמן את HelloWorld באדום. אפשר להתעלם מהפס האדום אבל לא כדאי - הוא שם כדי לעזור לנו להבין שיש לנו שגיאת כתיב. נתקן את שם המאפיין חזרה ל msg ונראה שהכל מסתדר. נשים לב ש TypeScript לא תופס את כל הבעיות, לדוגמה אם אני משנה באלמנט ה a את המאפיין href ל bref אז טייפסקריפט לא יתלונן ופשוט יהיה לי לינק שלא יעבוד.

4. שגיאות בזמן ריצת ה setup

בלוק ה script של קובץ SFC נקרא גם Setup Function. בואו ננסה לשבור אותו באמצעות עדכון הקוד לגירסה הזו:

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'

console.log(as);
</script>

הפעם אחרי שמירה אין שגיאה במסך שורת הפקודה שמריץ את npm run dev, והדפדפן לא מראה שגיאה אלא מראה מסך ריק. בכלי הפיתוח של הדפדפן אני מקבל את השגיאה:

App.vue:4 Uncaught ReferenceError: as is not defined
    at setup (App.vue:4:13)
    at callWithErrorHandling (runtime-core.esm-bundler.js:199:19)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7870:25)
    at setupComponent (runtime-core.esm-bundler.js:7831:36)
    at mountComponent (runtime-core.esm-bundler.js:5179:7)
    at processComponent (runtime-core.esm-bundler.js:5145:9)
    at patch (runtime-core.esm-bundler.js:4663:11)
    at render2 (runtime-core.esm-bundler.js:5942:7)
    at mount (runtime-core.esm-bundler.js:3904:13)
    at app.mount (runtime-dom.esm-bundler.js:1757:19)

וזה נקרא שגיאת זמן ריצה כי Vue לא זיהה אותה בזמן בניית התוכנית אלא רק במהלך הריצה כשניסה להפוך את התבנית לאלמנטים ב DOM. בנוסף לכלי הפיתוח שגיאה ספציפית זו היא גם שגיאת טייפסקריפט ולכן אני רואה פס אדום ב VS Code שמסמן לי שהמשתנה as אינו מוגדר.

5. התקנת כלי הפיתוח של Vue

כלי נוסף שעוזר לנו מתוך הדפדפן להבין את מבנה האפליקציה שלנו הוא ה Vue Developer Tools. נתקין את התוסף לכרום מהקישור:

https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

נרענן את העמוד שמציג את תוכנית ה Vue ונפתח את כלי הפיתוח (ייתכן ותצטרכו לסגור את חלון כלי הפיתוח ולפתוח אותו מחדש). בחלון כלי הפיתוח עכשיו נוסף טאב חדש בשם Vue שם אנחנו רואים את הקומפוננטות במערכת. נשים לב שהקומפוננטות בעצם מתאימות לקבצים בתוך הפרויקט, את App אנחנו כבר מכירים ואנחנו רואים שיש קומפוננטה נוספת בשם HelloWorld. תוכלו למצוא את קובץ ה Vue שלה בתוך תיקיית components בפרויקט.

כשאני לוחץ על HelloWorld אני רואה בצד ימין את ה props שלו ושם אני מוצא את המאפיין msg ששברתי קודם עם הערך Vite + Vue. בהמשך נגיע לדבר על הפיסקה השניה תחת הכותרת setup.

6. עכשיו אתם

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