Composition API در Vue.js 3: نگاهی عمیق برای توسعه‌دهندگان جهانی

Vue.js به لطف منحنی یادگیری آسان و ویژگی‌های قدرتمندش، به سرعت به گزینه‌ای محبوب برای ساخت برنامه‌های وب مدرن تبدیل شده است. Vue.js 3 با معرفی Composition API، که روشی جدید برای سازماندهی منطق کامپوننت شماست، این موضوع را یک قدم فراتر می‌برد. این بررسی عمیق، راهنمای جامعی برای درک و استفاده مؤثر از Composition API فراهم می‌کند و شما را به مهارت‌هایی برای ساخت برنامه‌های Vue قابل نگهداری‌تر، با قابلیت استفاده مجدد و قابل تست‌تر مجهز می‌کند.

Composition API چیست؟

Composition API مجموعه‌ای از APIها است که به ما امکان می‌دهد کامپوننت‌های Vue را با استفاده از توابع وارد شده (imported functions) به جای تعریف گزینه‌ها (options) بسازیم. اساساً، این API به شما اجازه می‌دهد تا منطق مرتبط را بدون توجه به اینکه در کجای تمپلیت ظاهر می‌شود، با هم گروه‌بندی کنید. این در تضاد با 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 به شما اجازه می‌دهد تا منطق مرتبط را در توابع ترکیب‌پذیر گروه‌بندی کنید، که باعث می‌شود کد شما سازمان‌یافته‌تر و فهم آن آسان‌تر شود. به جای پراکنده کردن کدهای مرتبط در خصوصیات مختلف Options API، می‌توانید همه آن‌ها را در یک مکان نگه دارید. این امر به ویژه هنگام کار با کامپوننت‌های پیچیده که شامل چندین ویژگی هستند، مفید است.
• افزایش قابلیت استفاده مجدد: توابع ترکیب‌پذیر را می‌توان به راحتی استخراج کرده و در چندین کامپوننت دوباره استفاده کرد. این کار باعث ترویج استفاده مجدد از کد و کاهش تکرار می‌شود و به توسعه کارآمدتر منجر می‌گردد. این یک تغییر بزرگ برای حفظ تجربه کاربری یکپارچه در سراسر برنامه شماست.
• تست‌پذیری بهتر: Composition API با اجازه دادن به شما برای تست توابع ترکیب‌پذیر به صورت مجزا، تست واحد (unit testing) را تسهیل می‌کند. این کار شناسایی و رفع باگ‌ها را آسان‌تر کرده و به برنامه‌های قوی‌تر و قابل اعتمادتر منجر می‌شود.
• ایمنی نوع (Type Safety): هنگام استفاده با TypeScript، Composition API ایمنی نوع عالی را فراهم می‌کند و خطاهای بالقوه را در حین توسعه تشخیص می‌دهد. این می‌تواند کیفیت کلی و قابلیت نگهداری کدبیس شما را به طور قابل توجهی بهبود بخشد.
• استخراج و استفاده مجدد منطق: Composition API استخراج و استفاده مجدد بخش‌های منطقی کامپوننت شما را ساده می‌کند. این امر به ویژه هنگام کار با ویژگی‌هایی مانند واکشی داده، اعتبارسنجی فرم، یا مدیریت احراز هویت کاربر که اغلب باید در چندین کامپوننت به اشتراک گذاشته شوند، مفید است.

درک مفاهیم اصلی

بیایید به مفاهیم کلیدی که زیربنای Composition API را تشکیل می‌دهند، بپردازیم:

1. setup()

همانطور که قبلاً ذکر شد، setup() نقطه ورود برای استفاده از Composition API است. این یک گزینه کامپوننت است که قبل از ایجاد کامپوننت اجرا می‌شود. در داخل setup()، شما وضعیت واکنشی، خصوصیات محاسبه‌شده، متدها و هوک‌های چرخه حیات را تعریف کرده و سپس یک شیء حاوی مقادیری که می‌خواهید در تمپلیت در دسترس باشند را برمی‌گردانید.

مثال:

            import { ref } from 'vue'

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

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

    return {
      count,
      increment
    }
  }
}

            

              
                Copy
              
            
          

در این مثال، ما از ref برای ایجاد یک متغیر واکنشی به نام count استفاده می‌کنیم. همچنین یک متد به نام increment تعریف می‌کنیم که مقدار count را افزایش می‌دهد. در نهایت، یک شیء حاوی count و increment را برمی‌گردانیم که آنها را در تمپلیت کامپوننت در دسترس قرار می‌دهد.

2. وضعیت واکنشی با ref و reactive

Composition API دو تابع اصلی برای ایجاد وضعیت واکنشی فراهم می‌کند: ref و reactive.

• ref: ref یک مقدار اولیه (عدد، رشته، بولین و غیره) را می‌گیرد و یک شیء ref واکنشی و قابل تغییر را برمی‌گرداند. مقدار از طریق خاصیت .value این ref قابل دسترسی و تغییر است. از ref زمانی استفاده کنید که می‌خواهید تغییرات یک مقدار واحد را ردیابی کنید.
• reactive: reactive یک شیء را می‌گیرد و یک پراکسی واکنشی از آن شیء را برمی‌گرداند. تغییرات در خصوصیات شیء واکنشی باعث به‌روزرسانی در کامپوننت می‌شود. از reactive زمانی استفاده کنید که می‌خواهید تغییرات چندین خاصیت در یک شیء را ردیابی کنید.

مثال با استفاده از ref:

            import { ref } from 'vue'

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

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

    return {
      message,
      updateMessage
    }
  }
}

            

              
                Copy
              
            
          

مثال با استفاده از 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
    }
  }
}

            

              
                Copy
              
            
          

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
    }
  }
}

            

              
                Copy
              
            
          

در این مثال، fullName یک خاصیت محاسبه‌شده است که به firstName و lastName وابسته است. هر زمان که firstName یا lastName تغییر کند، fullName به طور خودکار به‌روز خواهد شد.

4. واچرها با watch و watchEffect

واچرها به شما اجازه می‌دهند تا به تغییرات در وضعیت واکنشی واکنش نشان دهید. Composition API دو راه اصلی برای ایجاد واچرها فراهم می‌کند: watch و watchEffect.

• watch: watch به شما اجازه می‌دهد تا به صراحت مشخص کنید کدام وابستگی‌های واکنشی را باید تماشا کنید. این تابع یک یا چند مرجع واکنشی (refها، خصوصیات محاسبه‌شده، یا اشیاء واکنشی) را به عنوان آرگومان اول و یک تابع callback را به عنوان آرگومان دوم می‌گیرد. تابع callback هر زمان که هر یک از وابستگی‌های مشخص شده تغییر کنند، اجرا می‌شود.
• watchEffect: watchEffect به طور خودکار تمام وابستگی‌های واکنشی استفاده شده در داخل تابع callback خود را ردیابی می‌کند. تابع callback در ابتدا یک بار و سپس هر زمان که هر یک از وابستگی‌های ردیابی شده تغییر کنند، دوباره اجرا می‌شود. این زمانی مفید است که می‌خواهید اثرات جانبی را بر اساس تغییرات وضعیت واکنشی انجام دهید بدون اینکه صراحتاً وابستگی‌ها را مشخص کنید. با این حال، با 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
    }
  }
}

            

              
                Copy
              
            
          

مثال با استفاده از 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
    }
  }
}

            

              
                Copy
              
            
          

5. هوک‌های چرخه حیات

Composition API از طریق توابعی که با on شروع می‌شوند، مانند onMounted، onUpdated، و onUnmounted، دسترسی به هوک‌های چرخه حیات کامپوننت را فراهم می‌کند. این توابع یک callback به عنوان آرگومان می‌گیرند که هنگام فعال شدن هوک چرخه حیات مربوطه اجرا خواهد شد.

مثال:

            import { onMounted, onUnmounted } from 'vue'

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

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

    return {}
  }
}

            

              
                Copy
              
            
          

ایجاد توابع ترکیب‌پذیر (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
  }
}

            

              
                Copy
              
            
          

اکنون، می‌توانید از این تابع ترکیب‌پذیر در هر کامپوننتی استفاده کنید:

            import { useMousePosition } from './useMousePosition'

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

    return {
      x,
      y
    }
  }
}

            

              
                Copy
              
            
          

مثال‌های عملی و موارد استفاده

بیایید چند مثال عملی از نحوه استفاده از Composition API در سناریوهای دنیای واقعی را بررسی کنیم:

1. واکشی داده (Data Fetching)

ایجاد یک تابع ترکیب‌پذیر برای واکشی داده از یک 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
  }
}

            

              
                Copy
              
            
          

سپس می‌توانید از این تابع ترکیب‌پذیر در کامپوننت‌های خود به این شکل استفاده کنید:

            import { useFetch } from './useFetch'

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

    return {
      data,
      error,
      loading
    }
  }
}

            

              
                Copy
              
            
          

2. اعتبارسنجی فرم (Form Validation)

اعتبارسنجی فرم حوزه دیگری است که 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
  }
}

            

              
                Copy
              
            
          

استفاده در یک کامپوننت:

            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
    }
  }
}

            

              
                Copy
              
            
          

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
  }
}

            

              
                Copy
              
            
          

بهترین شیوه‌ها برای استفاده از Composition API

برای بهره‌برداری حداکثری از Composition API، بهترین شیوه‌های زیر را در نظر بگیرید:

• توابع ترکیب‌پذیر را متمرکز نگه دارید: هر تابع ترکیب‌پذیر باید یک هدف واحد و به خوبی تعریف شده داشته باشد. این کار باعث می‌شود فهم، استفاده مجدد و تست آنها آسان‌تر شود.
• از نام‌های توصیفی استفاده کنید: نام‌هایی را انتخاب کنید که به وضوح هدف تابع ترکیب‌پذیر را نشان دهند. این کار کد شما را خواناتر و قابل نگهداری‌تر می‌کند.
• فقط آنچه را که نیاز دارید برگردانید: فقط وضعیت واکنشی و توابعی را که واقعاً توسط کامپوننت مورد نیاز هستند، برگردانید. این به کاهش پیچیدگی کامپوننت‌های شما و بهبود عملکرد کمک می‌کند.
• استفاده از TypeScript را در نظر بگیرید: TypeScript ایمنی نوع عالی را فراهم می‌کند و می‌تواند به شما در تشخیص خطاها در مراحل اولیه توسعه کمک کند. این امر به ویژه هنگام کار با Composition API مفید است.
• توابع ترکیب‌پذیر خود را مستند کنید: به توابع ترکیب‌پذیر خود کامنت اضافه کنید تا هدف، نحوه کار و هرگونه وابستگی آنها را توضیح دهید. این کار باعث می‌شود سایر توسعه‌دهندگان (و خود آینده‌تان) کد شما را راحت‌تر بفهمند و استفاده کنند.
• توابع ترکیب‌پذیر خود را تست کنید: تست‌های واحد بنویسید تا اطمینان حاصل کنید که توابع ترکیب‌پذیر شما به درستی کار می‌کنند. این به شما کمک می‌کند تا باگ‌ها را زودتر تشخیص داده و کیفیت کلی کدبیس خود را بهبود بخشید.
• از یک سبک یکپارچه استفاده کنید: یک سبک یکپارچه برای توابع ترکیب‌پذیر خود ایجاد کرده و به آن پایبند باشید. این کار کد شما را خواناتر و قابل نگهداری‌تر می‌کند.

اشتباهات رایج و نحوه اجتناب از آنها

در حالی که Composition API مزایای زیادی دارد، برخی اشتباهات رایج نیز وجود دارد که باید از آنها آگاه بود:

• پیچیده کردن بیش از حد توابع ترکیب‌پذیر: به راحتی می‌توان زیاده‌روی کرد و توابع ترکیب‌پذیری ایجاد کرد که بیش از حد پیچیده هستند. سعی کنید آنها را متمرکز و ساده نگه دارید. اگر یک تابع ترکیب‌پذیر بیش از حد بزرگ شد، آن را به قطعات کوچکتر و قابل مدیریت‌تر تقسیم کنید.
• مشکلات واکنشی ناخواسته: مطمئن شوید که نحوه کار ref و reactive را درک کرده و از آنها به درستی استفاده می‌کنید. به عنوان مثال، تغییر مستقیم یک خاصیت تودرتو از یک ref بدون باز کردن آن می‌تواند منجر به رفتار غیرمنتظره شود.
• استفاده نادرست از هوک‌های چرخه حیات: به زمان‌بندی هوک‌های چرخه حیات توجه کنید و اطمینان حاصل کنید که از آنها به درستی استفاده می‌کنید. به عنوان مثال، سعی نکنید به عناصر DOM در onBeforeMount دسترسی پیدا کنید، زیرا هنوز ایجاد نشده‌اند.
• مشکلات عملکردی با watchEffect: به وابستگی‌هایی که توسط watchEffect ردیابی می‌شوند، توجه کنید. اگر وابستگی‌های زیادی را ردیابی کند، می‌تواند منجر به مشکلات عملکردی شود. به جای آن از watch برای مشخص کردن صریح وابستگی‌هایی که می‌خواهید تماشا کنید، استفاده کنید.
• فراموش کردن لغو ثبت شنوندگان رویداد (event listeners): هنگام استفاده از شنوندگان رویداد در یک تابع ترکیب‌پذیر، مطمئن شوید که آنها را در هوک onUnmounted لغو ثبت کنید تا از نشت حافظه جلوگیری شود.

Composition API و تیم‌های جهانی

Composition API با ترویج موارد زیر، همکاری در تیم‌های توسعه جهانی را تقویت می‌کند:

• ساختار کد استاندارد شده: تأکید بر توابع ترکیب‌پذیر، یک الگوی واضح و یکپارچه برای سازماندهی کد فراهم می‌کند که باعث می‌شود اعضای تیم با پیشینه‌های مختلف، کدبیس را راحت‌تر بفهمند و در آن مشارکت کنند.
• طراحی ماژولار: تجزیه منطق پیچیده به کامپوزبل‌های قابل استفاده مجدد، امکان طراحی ماژولارتر را فراهم می‌کند، جایی که اعضای مختلف تیم می‌توانند روی بخش‌های مستقل برنامه کار کنند بدون اینکه در کار یکدیگر تداخل ایجاد کنند.
• بررسی کد بهبود یافته: ماهیت متمرکز توابع ترکیب‌پذیر، بررسی کد را ساده می‌کند، زیرا بازبینان می‌توانند به راحتی هدف و عملکرد هر کامپوزبل را درک کنند.
• اشتراک‌گذاری دانش: توابع ترکیب‌پذیر به عنوان واحدهای مستقل دانش عمل می‌کنند که می‌توانند به راحتی در پروژه‌ها و تیم‌های مختلف به اشتراک گذاشته و دوباره استفاده شوند.

نتیجه‌گیری

Composition API در Vue.js 3 یک ابزار قدرتمند است که می‌تواند به طور قابل توجهی سازماندهی، قابلیت استفاده مجدد و تست‌پذیری برنامه‌های Vue شما را بهبود بخشد. با درک مفاهیم اصلی و پیروی از بهترین شیوه‌های ذکر شده در این بررسی عمیق، می‌توانید از Composition API برای ساخت برنامه‌های قابل نگهداری‌تر و مقیاس‌پذیرتر برای مخاطبان جهانی استفاده کنید. Composition API را بپذیرید و پتانسیل کامل Vue.js 3 را آزاد کنید.

ما شما را تشویق می‌کنیم که Composition API را در پروژه‌های خود تجربه کرده و امکانات گسترده‌ای که ارائه می‌دهد را کاوش کنید. کدنویسی خوش!