Vue.js

Vue.js

מחזור חיים	פברואר 2014 – הווה (כ־10 שנים)
גרסה אחרונה	3.4.30 (22 ביוני 2024)
מערכת הפעלה	חוצה-פלטפורמות
נכתבה בשפות	JavaScript, TypeScript
סוג רישיון	רישיון MIT
קוד מקור	https://github.com/vuejs/core
vuejs.org

Vue.js (המכונה בדרך כלל Vue; מבוטא "וִיוּ" כמו "view" ) היא שלד תוכנה בקוד פתוח של model–view–viewmodel פרונטאנד JavaScript לבניית ממשקי משתמש ויישומי עמוד בודד. השלד נוצר על ידי אוון יו, ומתוחזק על ידו ועל ידי שאר חברי צוות הליבה הפעילים.

סקירה כללית

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

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

היסטוריה

Vue נוצר על ידי אוון יו לאחר שעבד עבור Google באמצעות AngularJS במספר פרויקטים. מאוחר יותר הוא סיכם את תהליך החשיבה שלו: "חשבתי, מה אם אני יכול פשוט לחלץ את החלק שמאוד אהבתי ב-Angular ולבנות משהו ממש קליל". תרומת קוד המקור הראשונה לפרויקט הייתה מתוארכת ליולי 2013, ו-Vue שוחרר לראשונה בפברואר הבא, ב-2014.

שמות הגרסאות נגזרים לעיתים קרובות ממנגה ואנימה, רובם בתוך ז'אנר המדע הבדיוני.

גרסאות

גִרְסָה	תאריך הוצאה	כותרת	סוף LTS	סוף החיים
3.3	11 במאי 2023	רורואוני קנשין
3.2	5 באוגוסט 2021	חמישיות עיקריות
3.1	7 ביוני 2021	פלוטו
3.0	18 בספטמבר 2020	One Piece
2.7	1 ביולי 2022	נארוטו	31 בדצמבר 2023	31 בדצמבר 2023
2.6	4 בפברואר 2019	מקרוס	18 במרץ 2022	18 בספטמבר 2023
2.5	13 באוקטובר 2017	רמה E
2.4	13 ביולי 2017	קיל לה קיל
2.3	27 באפריל 2017	ההרפתקה המוזרה של ג'וג'ו
2.2	26 בפברואר 2017	ראשי D
2.1	22 בנובמבר 2016	האנטר אקס האנטר
2.0	30 בספטמבר 2016	רוח רפאים במעטפת
1.0	27 באוקטובר 2015	אוונגליון
0.12	12 ביוני 2015	דרגון בול
0.11	7 בנובמבר 2014	קאובוי ביבופ
0.10	23 במרץ 2014	בלייד ראנר
0.9	25 בפברואר 2014	Animatrix
0.8	27 בינואר 2014	—
0.7	24 בדצמבר 2013	—
0.6	8 בדצמבר 2013	VueJS

כאשר משוחררת גרסה עיקרית חדשה, כלומר v3.yz, הגרסה המשנית האחרונה, כלומר 2.xy הופכת לגרסת LTS (תמיכה ארוכת טווח) למשך 18 חודשים (תיקוני באגים ותיקוני אבטחה) ובמשך 18 החודשים הבאים יהיה במצב תחזוקה (תיקוני אבטחה בלבד).

תכונות

רכיבים

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

<template>
 <div id="tuto">
 <button-clicked v-bind:initial-count="0"></button-clicked>
 </div>
</template>

<script>
Vue.component('button-clicked', {
    props: ['initialCount'],
    data: () => ({
        count: 0,
    }),
    template: '<button v-on:click="onClick">Clicked {{ count }} times</button>',
    computed: {
        countTimesTwo() {
            return this.count * 2;
        },
    },
    watch: {
        count(newValue, oldValue) {
            console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
        },
    },
    methods: {
        onClick() {
            this.count += 1;
        },
    },
    mounted() {
        this.count = this.initialCount;
    },
});

new Vue({
    el: '#tuto',
});
</script>

תבניות

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

תגובתיות

Vue כולל מערכת תגובתיות המשתמשת באובייקטי JavaScript פשוטים ובעיבוד מחדש מאופטם. כל רכיב עוקב אחר התלות התגובתית שלו במהלך העיבוד שלו, כך שהמערכת יודעת בדיוק מתי לעבד מחדש, ואילו רכיבים לעבד מחדש.

מעברים

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

• החלה באופן אוטומטי של קלאסים עבור מעברי CSS ואנימציות
• אינטגרציה של ספריות צד שלישי אנימציה CSS, כגון Animate.css
• שימוש ב-JavaScript כדי לבצע מניפולציה ישירה של ה-DOM במהלך Hooking של מעברים
• אינטגרציה של ספריות צד שלישי אנימציה של JavaScript, כגון Velocity.js

כאשר אלמנט עטוף ברכיב מעבר מוכנס או מוסר, זה מה שקורה:

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

ניתוב

חיסרון מסורתי של יישומי דף יחיד (SPA) הוא חוסר היכולת לשתף קישורים לדף ה"משנה" המדויק בתוך דף אינטרנט ספציפי. מכיוון שיישומים מסוג זה מספקים למשתמשים שלהם רק תגובה אחת המבוססת על כתובת אתר מהשרת (הוא משרת בדרך כלל index.html או index.vue), שמירה כסימניה של מסכים מסוימים או שיתוף קישורים לקטעים ספציפיים היא בדרך כלל קשה עד בלתי אפשרית. כדי לפתור בעיה זו, נתבים רבים בצד הלקוח מגדירים את כתובות האתרים הדינמיות שלהם ב-" hashbang " (#!), למשל page.com/#! / . עם זאת, עם HTML5 רוב הדפדפנים המודרניים תומכים בניתוב ללא hashbangs.

Vue מספקת ממשק לשינוי מה שמוצג בדף בהתבסס על נתיב ה-URL הנוכחי - ללא קשר לאופן שבו הוא שונה (בין אם באמצעות קישור שנשלח בדוא"ל, רענון או קישורים בתוך הדף). בנוסף, שימוש בנתב בפרונטאנד מאפשר מעבר מכוון של נתיב הדפדפן כאשר אירועי דפדפן מסוימים (כלומר קליקים) מתרחשים על כפתורים או קישורים. Vue עצמו אינו מגיע עם ניתוב, אבל חבילת הקוד הפתוח "vue-router" מספקת API לעדכון כתובת ה-URL של האפליקציה, תומכת בלחצן 'הקודם' (היסטוריית ניווט), ואיפוסי סיסמה בדוא"ל או קישורי אימות בדוא"ל עם פרמטרים של כתובת URL לאימות. הוא תומך במיפוי מסלולים מקוננים לרכיבים מקוננים ומציע בקרת מעבר מדויקת. עם Vue, מפתחים כבר מחברים יישומים עם אבני בניין קטנות הבונות רכיבים גדולים יותר. עם ה-vue-router שנכנס לתמונה, יש למפות רכיבים רק למסלולים שאליהם הם שייכים, ומסלולי הורה/שורש חייבים לציין היכן אלמנטים צאצאים צריכים להופיע.

<div id="app">
 <router-view></router-view>
</div>
...

<script>
...
const User = {
 template: '<div>User {{ $route.params.id }}</div>'
};

const router = new VueRouter({
 routes: [
 { path: '/user/:id', component: User }
 ]
});
...
</script>

1. מגדיר נתיב פרונטאנד בכתובת websitename.com/user/<id> .
2. אשר יעבד ברכיב המשתמש המוגדר ב- (const User. . . )
3. מאפשר לרכיב המשתמש להעביר את המזהה המסוים של המשתמש שהוקלד בכתובת האתר באמצעות מפתח params של אובייקט $route: $route.params.id .
4. תבנית זו (המשתנה לפי הפרמטרים המועברים לנתב) תעובד ל- <router-view></router-view> בתוך ה-div#app של ה-DOM.
5. ה-HTML שנוצר לבסוף עבור מישהו שמקליד: websitename.com/user/1 יהיה:

<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

אקוסיסטם

ספריית הליבה מגיעה עם כלים וספריות שפותחו על ידי צוות הליבה והתורמים.

כלי עבודה רשמיים

• Devtools - תוסף דפדפן devtools לאיתור באגים ביישומי Vue.js
• Vue CLI - כלי עבודה סטנדרטיים לפיתוח מהיר של Vue.js
• Vue Loader – טוען webpack המאפשר כתיבה של רכיבי Vue בפורמט הנקרא Single-File Components (SFCs)

ספריות רשמיות

• Vue Router - הנתב הרשמי
• Vuex - ניהול מצב מרכזי בהשראת Flux
• Vue Server Renderer - עיבוד בצד השרת
• פיניה (Pinia)– ניהול מצב פשוט

ראו גם

• React
• Angular
• ספריית JavaScript
• Model–View–ViewModel

קישורים חיצוניים

מדיה וקבצים בנושא Vue.js בוויקישיתוף

• אתר האינטרנט הרשמי של Vue.js (באנגלית)
• Vue.js: The Documentary, סרט תיעודי ביוטיוב