এগুলি 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>
এক কনসার্নের জন্য state, 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 কোডবেস এটিকে পছন্দ করে।
উভয়ই সম্পূর্ণরূপে সমর্থিত; আপনি এমনকি সেগুলি মিশিয়ে ফেলতে পারেন।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন