આ 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 (with <script setup>) નવા Vue 3 પ્રોજેક્ટ માટે ભલામણ કરેલ ડિફોલ્ટ છે, ખાસ કરીને TypeScript સાથે।
Composition API એ Vue 3 નો કમ્પોનન્ટ તર્કશાસ્ત્ર સંગઠિત કરવા અને ફરીથી ઉપયોગી કરવાનો જવાબ છે।
તે સમજવું કે તે કોડ ફીચર દ્વારા ગોઠવે છે (વિકલ્પ પ્રકાર દ્વારા નહીં) અને composables સક્ષમ કરે છે — Options API ના વિકલ્પ-આધારિત બકેટ વિરુદ્ધ — આધુનિક Vue શૈલી અને શા માટે જટિલ કમ્પોનન્ટ અને TypeScript કોડબેસ તેને પસંદ કરે છે તે સમજાવે છે।
બંને સંપૂર્ણ રીતે સમર્થિત છે; તમે તેમને પણ મિશ્રણ કરી શકો છો।