Composition API
در ویو جی‌اس (Vue.js)، Composition API یک روش مدرن برای ساختاردهی منطق کامپوننت‌ها است که قابلیت بازاستفاده و مدولار بودن را افزایش می‌دهد. در حالی که Options API برای پروژه‌های کوچک مناسب است، مدیریت state و منطق پیچیده در پروژه‌های بزرگ چالش‌برانگیز می‌شود. Composition API این مشکل را با ارائه یک محیط متمرکز در setup() حل می‌کند، جایی که می‌توان state، computed properties و side effects را تعریف کرد و از قابلیت reactive ویو جی‌اس بهره برد.
این API به ویژه در پروژه‌های بزرگ مفید است، جایی که می‌توان منطق را در توابع مجزا یا Composables تقسیم کرد. مفاهیم کلیدی شامل ref و reactive برای reactivity، computed برای derived state، و watch برای پایش داده‌ها هستند. این مفاهیم امکان پیاده‌سازی الگوریتم‌ها، ساختار داده‌ها و اصول OOP را در پروژه‌های ویو جی‌اس فراهم می‌کنند.
خواننده در این آموزش یاد خواهد گرفت که چگونه reactivity را بهینه مدیریت کند، منطق را مدولار بسازد و در پروژه‌های بزرگ، کامپوننت‌هایی قابل نگهداری و performative ایجاد کند. علاوه بر این، مثال‌ها در زمینه توسعه نرم‌افزار و معماری سیستم، الگوهای پیشرفته و بهترین روش‌های توسعه ویو جی‌اس را نشان می‌دهند.
مثال پایه
textimport { createApp, ref, computed } from 'vue'
const App = {
setup() {
const counter = ref(0)
const increment = () => {
counter.value++
}
const doubleCounter = computed(() => counter.value * 2)
return {
counter,
increment,
doubleCounter
}
},
template: ` <div> <h1>شمارنده: {{ counter }}</h1> <h2>شمارنده دو برابر: {{ doubleCounter }}</h2> <button @click="increment">افزایش</button> </div>
`
}
createApp(App).mount('#app')در این مثال، setup() نقطه مرکزی Composition API است. متغیر counter با ref تعریف شده و reactive است. تابع increment با رویداد کلیک مرتبط است و doubleCounter یک computed property است که مقدار دو برابر counter را محاسبه می‌کند. با بازگرداندن counter، increment و doubleCounter از setup()، می‌توانیم آن‌ها را در template استفاده کنیم و نشان‌دهنده ساختار مدولار و قابل تست بودن منطق است.
مهم است که درک کنید چرا از .value برای ref استفاده می‌کنیم و return در setup() چه کاربردی دارد. این الگو باعث می‌شود کد clean، reusable و maintainable باشد.
مثال کاربردی
textimport { createApp, reactive, watch } from 'vue'
const App = {
setup() {
const state = reactive({
tasks: [],
newTask: ''
})
const addTask = () => {
if (state.newTask.trim() !== '') {
state.tasks.push({ text: state.newTask, done: false })
state.newTask = ''
}
}
watch(() => state.tasks.length, (newLength, oldLength) => {
console.log(`تعداد تسک‌ها تغییر کرد: ${oldLength} → ${newLength}`)
})
const removeTask = (index) => {
state.tasks.splice(index, 1)
}
return {
state,
addTask,
removeTask
}
},
template: ` <div> <h1>لیست تسک‌ها</h1> <input v-model="state.newTask" placeholder="تسک جدید اضافه کنید" /> <button @click="addTask">افزودن</button> <ul> <li v-for="(task, index) in state.tasks" :key="index">
{{ task.text }} <button @click="removeTask(index)">حذف</button> </li> </ul> </div>
`
}
createApp(App).mount('#app')این الگو اصول OOP را رعایت می‌کند و ساختار مدولار آن آماده refactoring به Composables است. استفاده صحیح از reactivity، اجتناب از manipulation مستقیم DOM و پاک‌سازی watch برای جلوگیری از memory leaks و بهینه‌سازی عملکرد، از best practices مهم است.
بهترین روش‌ها و اشتباهات رایج در Composition API ویو جی‌اس شامل انتخاب مناسب ref یا reactive، استفاده ایمن از computed و watch، و مدیریت صحیح خطاها با try/catch است. برای debugging، می‌توان از Vue Devtools استفاده کرد.
📊 جدول مرجع
| ویو جی‌اس (Vue.js) Element/Concept | Description | Usage Example |
|---|---|---|
| ref | تعریف یک متغیر ساده reactive | const count = ref(0) |
| reactive | تعریف یک شی reactive با چند property | const state = reactive({ name: '', age: 0 }) |
| computed | مقدار مشتق شده reactive | const double = computed(() => count.value * 2) |
| watch | پایش تغییرات داده و اجرای side effects | watch(() => state.tasks.length, (newVal) => console.log(newVal)) |
| setup | نقطه ورود منطق کامپوننت | setup() { const data = ref(0); return { data } } |
Composition API امکان مدیریت بهینه reactivity، computed و watch را فراهم می‌کند و منطق را به صورت مدولار سازماندهی می‌کند. توسعه‌دهندگان می‌توانند کامپوننت‌های مقیاس‌پذیر، قابل خواندن و reusable بسازند.
گام‌های بعدی شامل استفاده از Composables، ادغام با ابزارهایی مانند Pinia برای مدیریت state و استفاده از async setup و suspense برای الگوهای پیشرفته است. Documentation رسمی و پروژه‌های open-source منابع مفیدی برای یادگیری هستند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود