यी Vue components लेखनका दुई तरिका हुन्। Options API ले कोडलाई option type को आधारमा संगठित गर्छ (data, methods, computed); Composition API ले कोडलाई ref, , र जस्ता functions प्रयोग गरी को आधारमा संगठित गर्छ।
यी Vue components लेखनका दुई तरिका हुन्। Options API ले कोडलाई option type को आधारमा संगठित गर्छ (data, methods, computed); Composition API ले कोडलाई ref, , र जस्ता functions प्रयोग गरी को आधारमा संगठित गर्छ।
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
सबै कुरा निर्धारित buckets (data, methods, computed, lifecycle) मा समूहबद्ध हुन्छ। यो सरल र खोज्न सजिलो हुन्छ, तर एकै feature को logic ती buckets मा बिखरिएको हुन्छ।
<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>
एक concern को 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 मा नामकरण टकरा र अस्पष्ट स्रोत थिए)।
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 (with <script setup>) नयाँ Vue 3 projects को लागि अनुशंसित डिफल्ट हो, विशेष गरी TypeScript को साथ।
Composition API भनेको Vue 3 को component logic संगठित र पुनः प्रयोग गर्ने जवाफ हो।
यो बुझ्नु कि यो कोडलाई feature को आधारमा समूहबद्ध गर्छ (option type को आधारमा होइन) र composables सक्षम गर्छ — Options API को option-आधारित buckets को विपरीत — आधुनिक Vue शैली र जटिल components र TypeScript codebases ले किन यसलाई प्राथमिकता दिन्छन् भन्ने कुरा व्याख्या गर्छ।
दुबै पूर्ण रूपमा समर्थित छन्; तपाई तिनलाई मिश्रण पनि गर्न सक्नुहुन्छ।