Composition API
Vue.js (व्यू जेएस) में Composition API एक आधुनिक तरीका है जो कॉम्पोनेंट लॉजिक को अधिक मॉड्यूलर और पुन: प्रयोज्य तरीके से व्यवस्थित करने में मदद करता है। पारंपरिक Options API में बड़ी परियोजनाओं में लॉजिक का पुन: उपयोग करना और जटिलताओं को प्रबंधित करना चुनौतीपूर्ण होता है। Composition API इस समस्या का समाधान प्रस्तुत करता है, जिससे हम setup() फ़ंक्शन में state, computed प्रॉपर्टीज़ और side effects को परिभाषित कर सकते हैं।
Composition API मुख्य रूप से बड़ी परियोजनाओं में उपयोगी है, जहाँ लॉजिक को फ़ंक्शनल मॉड्यूल्स या Composables के रूप में विभाजित करना आसान होता है। इसके प्रमुख कॉन्सेप्ट्स में ref और reactive के माध्यम से reactivity, computed के माध्यम से derived state, और watch के माध्यम से data observation शामिल हैं। ये सभी तत्व हमें Vue.js (व्यू जेएस) में एल्गोरिदम, डेटा स्ट्रक्चर और OOP प्रिंसिपल्स के साथ कार्य करने की अनुमति देते हैं।
इस ट्यूटोरियल के माध्यम से पाठक सीखेंगे कि कैसे reactivity का कुशल प्रबंधन किया जाता है, लॉजिक को modular बनाया जाता है, और बड़े Vue.js (व्यू जेएस) प्रोजेक्ट्स में maintainable और performative components बनाए जाते हैं। साथ ही, हम software development और system architecture के संदर्भ में advanced patterns का अभ्यास करेंगे।
मूल उदाहरण
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 के साथ reactivity प्रदान की गई है। increment फ़ंक्शन क्लिक इवेंट को हैंडल करता है, और doubleCounter एक computed प्रॉपर्टी के माध्यम से counter का दुगुना मान दिखाता है। setup() से counter, increment और doubleCounter को return करना हमें template में उन्हें उपयोग करने की सुविधा देता है और यह modular लॉजिक का उदाहरण है।
नए डेवलपर्स के लिए .value के महत्व और setup() में return के उद्देश्य को समझना आवश्यक है। यह पैटर्न clean, testable और reusable कोड बनाने में मदद करता है।
व्यावहारिक उदाहरण
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(`Tasks की संख्या बदल गई: ${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 principles का पालन करता है और modular structure Composables में refactoring के लिए तैयार है। best practices में reactivity का सही उपयोग, direct DOM manipulation से बचना और watch cleanup शामिल हैं, ताकि memory leaks और performance issues से बचा जा सके।
Vue.js (व्यू जेएस) में Composition API के लिए best practices में ref और reactive का उचित चयन, computed और watch का सुरक्षित उपयोग शामिल है। Computed में भारी calculation से बचें और watch को setup() के अंदर या modular functions में ही define करें। Errors को try/catch से handle करें। Vue Devtools का उपयोग debugging के लिए करें।
📊 संदर्भ तालिका
| Vue.js (व्यू जेएस) Element/Concept | Description | Usage Example |
|---|---|---|
| ref | Simple reactive variable | const count = ref(0) |
| reactive | Reactive object with multiple properties | const state = reactive({ name: '', age: 0 }) |
| computed | Derived reactive property | const double = computed(() => count.value * 2) |
| watch | Observe changes and trigger side effects | watch(() => state.tasks.length, (newVal) => console.log(newVal)) |
| setup | Entry point for component logic | setup() { const data = ref(0); return { data } } |
Composition API से reactivity, computed और watch को efficiently manage किया जा सकता है और logic modular रूप में structured रहती है। डेवलपर्स scalable, readable और reusable components बना सकते हैं।
अगले कदम में Composables का प्रयोग, Pinia जैसे state management tools का integration और async setup एवं suspense जैसे advanced patterns का अभ्यास शामिल होना चाहिए। Official documentation, tutorials और open-source projects learning resources के लिए उपयोगी हैं।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी