ये Vue components लिखने के दो तरीके हैं। Options API code को option type के अनुसार व्यवस्थित करता है (data, methods, computed); Composition API code को तार्किक चिंता (logical concern) के अनुसार , , और जैसी functions का उपयोग करके व्यवस्थित करता है।
ये Vue components लिखने के दो तरीके हैं। Options API code को option type के अनुसार व्यवस्थित करता है (data, methods, computed); Composition API code को तार्किक चिंता (logical concern) के अनुसार , , और जैसी functions का उपयोग करके व्यवस्थित करता है।
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
हर चीज़ निश्चित बकेट्स (data, methods, computed, lifecycle) में समूहित होती है। सरल और खोजने में आसान, लेकिन किसी एक feature की logic इन बकेट्स में बिखर जाती है।
<script setup>
import { ref, computed, onMounted } from "vue";
// all the logic for "counter" lives together
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>
एक ही चिंता के लिए state, computed, methods, और lifecycle एक साथ रहते हैं, और <script setup> इसे संक्षिप्त बना देता है (न this, न return)।
Composition API आपको stateful logic को निकालने और पुन: उपयोग करने देता है, सादे functions (composables) के रूप में:
// useCounter.js — reusable across any component
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
<script setup>
const { count, increment } = useCounter(); // reuse anywhere
</script>
यह logic-reuse को साफ़ ढंग से हल कर देता है, जो Options API में मुश्किल था (mixins में naming collisions और अस्पष्ट स्रोत होते थे)।
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
Composition API (<script setup> के साथ) नए Vue 3 projects के लिए अनुशंसित डिफ़ॉल्ट है, विशेष रूप से TypeScript के साथ।
Composition API component logic को व्यवस्थित और पुन: उपयोग करने के लिए Vue 3 का उत्तर है।
यह समझना कि यह code को feature के अनुसार समूहित करता है (न कि option type के अनुसार) और composables को सक्षम बनाता है — Options API के option-आधारित बकेट्स के मुक़ाबले — आधुनिक Vue शैली और यह समझाता है कि जटिल components और TypeScript codebases इसे क्यों पसंद करते हैं।
दोनों पूरी तरह समर्थित हैं; आप इन्हें मिला भी सकते हैं।