ఇవి Vue components లను వ్రాయడానికి రెండు విధులు. Options API కోడ్ను option type (data, methods, computed) ద్వారా ఆర్గనైజ్ చేస్తుంది; Composition API ref, , మరియు వంటి ఫంక్షన్లను ఉపయోగించి ద్వారా కోడ్ను ఆర్గనైజ్ చేస్తుంది.
ఇవి Vue components లను వ్రాయడానికి రెండు విధులు. Options API కోడ్ను option type (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, methods, మరియు lifecycle ఒక concern కోసం కూడా కూర్చుంటుంది, మరియు <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 పేరు ఘర్షణలు మరియు అస్పష్ట వనరులను కలిగి ఉంది).
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 component logic ను ఆర్గనైజ్ మరియు పునర్వినియోగం కోసం Vue 3 యొక్క సమాధానం.
ఇది feature ద్వారా కోడ్ను సమూహీకరిస్తుంది (option type ద్వారా కాదు) మరియు composables ను ఎనేబల్ చేస్తుంది — Options API యొక్క option-based buckets తో పోల్చితే — ఆధునిక Vue style నెరవేర్చుకుంది మరియు క్లిష్టమైన components మరియు TypeScript codebases ఎందుకు దీనిని ఆన్బోర్డ్ చేస్తాయో వివరిస్తుంది.
రెండూ సંపూర్ణంగా సపోర్టెడ్; మీరు వాటిని కలపవచ్చు.