இவை 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) தொகுக்கப்பட்டுள்ளது. எளிய மற்றும் கண்டுபிடிக்கக்கூடியது, ஆனால் ஒற்றை feature இன் தர்க்கம் அந்த கண்ணாடிகள் முழுவதும் சிதறிக்கிடக்கிறது.
<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, முறைகள், மற்றும் lifecycle ஒரு கவலைக்கு ஒன்றாக உட்காரும், மற்றும் <script setup> இது சுருக்கமாக்குகிறது (this இல்லை, return இல்லை).
Composition API உங்களை stateful logic ஐ பொதுவான செயல்பாடுகளாக (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 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 கூறு தர்க்கத்தை ஒழுங்கமைக்கவும் மறுபயன்படுத்தவும் Vue 3 இன் பதில்.
இது feature மூலம் குறியீட்டை தொகுக்கிறது (விருப்ப வகை மூலம் அல்ல) மற்றும் composables ஐ இயக்குகிறது — Options API இன் விருப்ப-அடிப்படையிலான கண்ணாடிகளுடன் ஒப்பிடுகையில் — நவீன Vue பாணியை விளக்குகிறது மற்றும் சிக்கலான கூறுகள் மற்றும் TypeScript codebases ஏன் இதை விரும்புகின்றன என்பதை விளக்குகிறது.
இரண்டுமே முற்றிலும் ஆதரிக்கப்படுகின்றன; நீங்கள் அவற்றை கலக்கக்கூடும்.