Bunlar Vue bileşenleri yazmak için iki yoldur. Options API kodu seçenek türüne göre (data, methods, computed) düzenler; Composition API kodu ref, ve gibi işlevleri kullanarak göre düzenler.
Bunlar Vue bileşenleri yazmak için iki yoldur. Options API kodu seçenek türüne göre (data, methods, computed) düzenler; Composition API kodu ref, ve gibi işlevleri kullanarak göre düzenler.
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Her şey sabit bölmelere (data, methods, computed, lifecycle) gruplanır. Basit ve keşfedilebilir, ancak tek bir özelliğin mantığı bu bölmeler arasında dağılmıştır.
<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>
Durum, computed, yöntemler ve lifecycle bir endişe için birlikte otururlar ve <script setup> bunu özlü hale getirir (no this, no return).
Composition API, durum mantığını düz işlevler (composables) olarak ayıklamanıza ve yeniden kullanmanıza olanak tanır:
// 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>
Bu, mantık yeniden kullanımını temiz bir şekilde çözer; bu, Options API'de hantal idi (mixins ad çakışmalarına ve belirsiz kaynaklara sahipti).
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> ile) yeni Vue 3 projeleri için önerilen varsayılantır, özellikle TypeScript ile.
Composition API, bileşen mantığını düzenleme ve yeniden kullanma konusunda Vue 3'ün cevabıdır.
Bunun kodu özelliğe göre (seçenek türüne göre değil) gruplandırması ve composables'ı etkinleştirmesi — Options API'nin seçenek tabanlı bölmelerine kıyasla — modern Vue stilini açıklar ve karmaşık bileşenlerin ve TypeScript kod tabanlarının neden bunu tercih ettiğini açıklar.
Her ikisi de tam olarak desteklenmektedir; hatta karıştırabilirsiniz.