M

MLOG

فارسی

Composition API در Vue.js 3 را عمیقاً کاوش کنید. یاد بگیرید چگونه با مثال‌های عملی و بهترین شیوه‌ها، برنامه‌های Vue.js قابل استفاده مجدد، قابل نگهداری و قابل تست بسازید.

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 را تشکیل می‌دهند، بپردازیم:

1. setup()

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

مثال:

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. واچرها با 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. هوک‌های چرخه حیات

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

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

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

import { useFetch } from './useFetch'

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

    return {
      data,
      error,
      loading
    }
  }
}

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

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

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 را در پروژه‌های خود تجربه کرده و امکانات گسترده‌ای که ارائه می‌دهد را کاوش کنید. کدنویسی خوش!