M

MLOG

עברית

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

Vue.js 3 Composition API: צלילה עמוקה למפתחים גלובליים

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

מהו ה-Composition API?

ה-Composition API הוא סט של ממשקי API המאפשרים לנו לכתוב קומפוננטות Vue באמצעות פונקציות מיובאות במקום להכריז על אפשרויות. בעיקרו של דבר, הוא מאפשר לקבץ לוגיקה קשורה יחד, ללא קשר למקום הופעתה בתבנית (template). זה בניגוד ל-Options API (data, methods, computed, watch), שמאלץ אתכם לארגן קוד על בסיס קטגוריות מוגדרות מראש אלו. חשבו על ה-Options API כארגון הקוד שלכם לפי *מה* שהוא (נתונים, מתודה וכו'), בעוד שה-Composition API מאפשר לכם לארגן קוד לפי *מה שהוא עושה*.

הליבה של ה-Composition API סובבת סביב הפונקציה setup(). פונקציה זו היא נקודת הכניסה לשימוש ב-Composition API בתוך קומפוננטה. בתוך setup(), ניתן להגדיר מצב ריאקטיבי (reactive state), מאפיינים מחושבים (computed properties), מתודות ו-lifecycle hooks באמצעות פונקציות הרכבה (composable functions).

למה להשתמש ב-Composition API?

ה-Composition API מציע מספר יתרונות על פני ה-Options API המסורתי, במיוחד עבור יישומים גדולים ומורכבים יותר:

הבנת מושגי הליבה

בואו נצלול למושגי המפתח שעומדים בבסיס ה-Composition API:

1. setup()

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

דוגמה:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

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

2. מצב ריאקטיבי עם ref ו-reactive

ה-Composition API מספק שתי פונקציות ליבה ליצירת מצב ריאקטיבי: ref ו-reactive.

דוגמה לשימוש ב-ref:

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue!')

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

דוגמה לשימוש ב-reactive:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'John Doe',
      age: 30
    })

    const updateName = (newName) => {
      state.name = newName
    }

    return {
      state,
      updateName
    }
  }
}

3. מאפיינים מחושבים עם computed

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

דוגמה:

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

בדוגמה זו, fullName הוא מאפיין מחושב התלוי ב-firstName ו-lastName. בכל פעם ש-firstName או lastName ישתנו, fullName יתעדכן אוטומטית.

4. צופים (Watchers) עם watch ו-watchEffect

צופים מאפשרים לכם להגיב לשינויים במצב ריאקטיבי. ה-Composition API מספק שתי דרכים עיקריות ליצירת צופים: watch ו-watchEffect.

דוגמה לשימוש ב-watch:

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Count changed from ${oldValue} to ${newValue}`)
      }
    )

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

דוגמה לשימוש ב-watchEffect:

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('Hello')

    watchEffect(() => {
      console.log(`Message is: ${message.value}`)
    })

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

5. Lifecycle Hooks

ה-Composition API מספק גישה ל-lifecycle hooks של הקומפוננטה דרך פונקציות שמתחילות ב-on, כגון onMounted, onUpdated, ו-onUnmounted. פונקציות אלו מקבלות callback כארגומנט, אשר יופעל כאשר ה-lifecycle hook המתאים יופעל.

דוגמה:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted')
    })

    onUnmounted(() => {
      console.log('Component is unmounted')
    })

    return {}
  }
}

יצירת פונקציות הרכבה (Composable Functions)

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

דוגמה: בואו ניצור פונקציית הרכבה שעוקבת אחר מיקום העכבר:

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (event) => {
    x.value = event.clientX
    y.value = event.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })

  return {
    x,
    y
  }
}

כעת, תוכלו להשתמש בפונקציית ההרכבה הזו בכל קומפוננטה:

import { useMousePosition } from './useMousePosition'

export default {
  setup() {
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
}

דוגמאות מעשיות ומקרי שימוש

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

1. שליפת נתונים

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

import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return {
    data,
    error,
    loading
  }
}

לאחר מכן תוכלו להשתמש בפונקציית ההרכבה הזו בקומפוננטות שלכם כך:

import { useFetch } from './useFetch'

export default {
  setup() {
    const { data, error, loading } = useFetch('https://api.example.com/data')

    return {
      data,
      error,
      loading
    }
  }
}

2. אימות טפסים

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

import { ref } from 'vue'

export function useValidation() {
  const errors = ref({})

  const validateField = (fieldName, value, rules) => {
    let error = null
    for (const rule of rules) {
      if (rule === 'required' && !value) {
        error = 'This field is required'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Invalid email format'
        break
      }
    }

    if (error) {
      errors.value[fieldName] = error
    } else {
      delete errors.value[fieldName]
    }
  }

  return {
    errors,
    validateField
  }
}

שימוש בקומפוננטה:

import { useValidation } from './useValidation'
import { ref } from 'vue'

export default {
  setup() {
    const { errors, validateField } = useValidation()
    const email = ref('')

    const validateEmail = () => {
      validateField('email', email.value, ['required', 'email'])
    }

    return {
      email,
      errors,
      validateEmail
    }
  }
}

3. ניהול אימות משתמשים

לוגיקת אימות יכולה לעיתים קרובות להיות מורכבת ומשוכפלת על פני מספר קומפוננטות. ה-Composition API מאפשר לכם ליצור פונקציית הרכבה המכילה את כל לוגיקת האימות ומספקת API נקי לשימוש הקומפוננטות שלכם.

דוגמה: (מפושטת)

import { ref } from 'vue'

export function useAuth() {
  const isLoggedIn = ref(false)
  const user = ref(null)

  const login = async (username, password) => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

שיטות עבודה מומלצות לשימוש ב-Composition API

כדי להפיק את המרב מה-Composition API, שקלו את שיטות העבודה המומלצות הבאות:

מלכודות נפוצות וכיצד להימנע מהן

בעוד שה-Composition API מציע יתרונות רבים, ישנן גם כמה מלכודות נפוצות שיש להיות מודעים אליהן:

ה-Composition API וצוותים גלובליים

ה-Composition API מטפח שיתוף פעולה בתוך צוותי פיתוח גלובליים על ידי קידום:

סיכום

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

אנו מעודדים אתכם להתנסות עם ה-Composition API בפרויקטים שלכם ולחקור את האפשרויות העצומות שהוא מציע. קידוד מהנה!