یہ Vue اجزاء لکھنے کے دو طریقے ہیں۔ Options API کوڈ کو option کی قسم کے لحاظ سے منظم کرتا ہے (data، methods، computed)؛ Composition API کوڈ کو ref، ، اور جیسے functions استعمال کرتے ہوئے کے لحاظ سے منظم کرتا ہے۔
یہ Vue اجزاء لکھنے کے دو طریقے ہیں۔ Options API کوڈ کو option کی قسم کے لحاظ سے منظم کرتا ہے (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 کی منطق ان 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>
ایک مسئلے کی state، computed، methods، اور lifecycle ایک ساتھ بیٹھے ہوتے ہیں، اور <script setup> اسے جامع بناتا ہے (کوئی this نہیں، کوئی return نہیں)۔
Composition API آپ کو stateful منطق کو نکال کر اور دوبارہ استعمال کرنے کی اجازت دیتا ہے جیسے سادہ 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>
یہ منطق کے دوبارہ استعمال کے مسئلے کو صاف طریقے سے حل کرتا ہے، جو Options API میں مشکل تھا (mixins میں naming تنازعات اور غیر واضح ذرائع تھے)۔
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 اجزاء کی منطق کو منظم اور دوبارہ استعمال کرنے کے لیے Vue 3 کا جواب ہے۔
یہ سمجھنا کہ یہ کوڈ کو feature کے لحاظ سے گروپ بندی کرتا ہے (option type کے لحاظ سے نہیں) اور composables کو فعال بناتا ہے — بمقابلہ Options API کے option پر مبنی buckets کے — جدید Vue انداز کی وضاحت کرتا ہے اور یہ بتاتا ہے کہ پیچیدہ اجزاء اور TypeScript codebase اسے کیوں ترجیح دیتے ہیں۔
دونوں مکمل طور پر معاون ہیں؛ آپ انہیں ملا بھی سکتے ہیں۔