हे Vue घटक लिहिण्याचे दोन मार्ग आहेत. Options API पर्याय प्रकार (data, methods, computed) द्वारे कोड संघटित करते; Composition API ref, , आणि सारख्या फंक्शन्स वापरून द्वारा कोड संघटित करते.
हे Vue घटक लिहिण्याचे दोन मार्ग आहेत. Options API पर्याय प्रकार (data, methods, computed) द्वारे कोड संघटित करते; Composition API ref, , आणि सारख्या फंक्शन्स वापरून द्वारा कोड संघटित करते.
computedsetup<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). सरल आणि शोधायोग्य, परंतु एक वैशिष्ट्य चा तर्क त्या बाल्टींमध्ये विखुरलेला आहे.
<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>
एक चिंतेसाठी स्थिती, computed, methods, आणि lifecycle एक सोबत बसतात, आणि <script setup> हे संक्षिप्त करते (this नाही, return नाही).
Composition API आपल्याला स्टेटफुल लॉजिक काढून आणि पुन्हा वापरू शकते साधारण फंक्शन्स म्हणून (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>
हे तर्क-पुन्हा वापर साफ सुथरपणे सोडवते, जे 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 (<script setup> सह) नवीन Vue 3 प्रकल्पांसाठी सुचारित डिफॉल्ट आहे, विशेषत: TypeScript सह.
Composition API हे Vue 3 चे घटक तर्क संघटित आणि पुन्हा वापरण्याचे उत्तर आहे.
हे समजून घेणे की ते कोड फीचर द्वारे (पर्याय प्रकार द्वारे नाही) गटबद्ध करते आणि composables सक्षम करते — Options API चे पर्याय-आधारित बाल्टी विरुद्ध — आधुनिक Vue शैली समजावते आणि जटिल घटक आणि TypeScript कोडबेसेस का हे पसंद करतात.
दोन्ही पूर्णपणे समर्थित आहेत; आपण त्यांना मिश्रित करू शकता.