Vue 3'ün Composition API'si, Options API'nin getirdiği büyük component'lerde mantığın dağılması sorununu çözer. React hooks'a benzer bir paradigma - fonksiyonel, composable, TypeScript dostu. Bu yazı Composition API'yi sıfırdan anlatır ve gerçek dünya örnekleriyle kullanımını gösterir.

- Modern Yazım

İlgili rehberler: Yazılım geliştirme süreçleri · PostgreSQL optimizasyonu · Git ileri seviye komutlar · Redis nedir, nasıl kullanılır · Docker ile deploy · Docker Compose: Çoklu Servis Mimarisi ve Production Deployment

vue
<script setup>
import { ref, computed, watch, onMounted } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);

function increment() {
    count.value++;
}

watch(count, (newVal, oldVal) => {
    console.log(`${oldVal} - ${newVal}`);
});

onMounted(() => {
    console.log('Component mounted');
});
</script>

<template>
    <button @click="increment">{{ count }} × 2 = {{ doubled }}</button>
</template>

ref vs reactive

Vue'de reactive state için iki API var:

  • ref() - primitive değer (number, string, boolean). .value ile erişirsin
  • reactive() - object/array için. Direkt erişim ama destructure edince reactivity kaybolur
javascript
import { ref, reactive, toRefs } from 'vue';

// ref - primitive
const count = ref(0);
count.value++;  // JS'te .value gerekir
// template'te {{ count }} - otomatik unwrap

// reactive - object
const state = reactive({
    name: 'Ali',
    age: 30
});
state.age++;  // direkt erişim

// YANLIŞ - destructure reactivity'yi bozar
const { age } = state;  // age artık reactive değil

// DOĞRU - toRefs ile
const { age: ageRef } = toRefs(state);
ageRef.value++;  // çalışır

Computed

javascript
const firstName = ref('Ali');
const lastName = ref('Yılmaz');

// Readonly computed
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

// Writable computed (getter + setter)
const fullNameRW = computed({
    get: () => `${firstName.value} ${lastName.value}`,
    set: (v) => {
        [firstName.value, lastName.value] = v.split(' ');
    }
});

Watch ve WatchEffect

javascript
import { ref, watch, watchEffect } from 'vue';

const userId = ref(1);
const user = ref(null);

// watch - explicit source, değişince çalışır
watch(userId, async (newId) => {
    user.value = await fetchUser(newId);
}, { immediate: true });  // ilk yüklemede de çalış

// Birden fazla source
watch([userId, other], ([newId, newOther]) => {});

// Deep watch
watch(stateObject, fn, { deep: true });

// watchEffect - kullandığı tüm reactive'leri otomatik takip eder
watchEffect(() => {
    console.log(`user ${userId.value} = ${user.value?.name}`);
});

Lifecycle Hooks

javascript
import {
    onBeforeMount, onMounted,
    onBeforeUpdate, onUpdated,
    onBeforeUnmount, onUnmounted,
    onErrorCaptured
} from 'vue';

onMounted(() => console.log('mounted'));
onUnmounted(() => console.log('cleanup'));

Composables - Yeniden Kullanılabilir Mantık

Composable, Composition API kullanarak yazılmış reusable fonksiyon. React'taki custom hook'ların karşılığı. Vue convention: use prefix'i.

javascript
// composables/useFetch.js
import { ref, watchEffect, toValue } from 'vue';

export function useFetch(url) {
    const data = ref(null);
    const error = ref(null);
    const loading = ref(false);

    watchEffect(async () => {
        const u = toValue(url);  // ref veya getter'ı çöz
        data.value = null;
        error.value = null;
        loading.value = true;
        try {
            const res = await fetch(u);
            if (!res.ok) throw new Error(`HTTP ${res.status}`);
            data.value = await res.json();
        } catch (e) {
            error.value = e;
        } finally {
            loading.value = false;
        }
    });

    return { data, error, loading };
}
vue
<script setup>
import { ref } from 'vue';
import { useFetch } from './composables/useFetch';

const userId = ref(1);
const url = computed(() => `/api/users/${userId.value}`);
const { data: user, loading, error } = useFetch(url);
</script>

<template>
    <p v-if="loading">Yükleniyor...
    <p v-else-if="error">{{ error.message }}
    <pre v-else>{{ user }}</pre>
</template>

Props ve Emits

vue
<script setup>
const props = defineProps({
    id: { type: Number, required: true },
    label: { type: String, default: ' }
});

const emit = defineEmits(['update', 'delete']);

function save() {
    emit('update', { id: props.id, changed: true });
}
</script>

<!-- Parent -->
<UserCard :id="1" label="Ali" @update="handleUpdate" />

v-model with Composition

vue
<!-- Parent -->
<CustomInput v-model="text" />

<!-- CustomInput.vue (Vue 3.4+) -->
<script setup>
const model = defineModel();  // iki yönlü binding
</script>

<template>
    <input v-model="model" />
</template>

Pinia (Store)

javascript
// stores/user.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useUserStore = defineStore('user', () => {
    const user = ref(null);
    const isAdmin = computed(() => user.value?.role === 'admin');

    async function login(email, password) {
        user.value = await api.login(email, password);
    }

    function logout() {
        user.value = null;
    }

    return { user, isAdmin, login, logout };
});

// Component'te
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
userStore.login(email, password);

Options API vs Composition API

  • Options API: Yeni başlayanlar için daha kolay, component yapısı zorla düzenli
  • Composition API: Mantık grup'lanabilir, composable ile paylaşılabilir, TypeScript daha iyi
  • Ekip kararı: İkisini de karıştırmayın - bir component ya Options ya Composition

Modern Yazılım Geliştirme ve DevOps Pratikleri

Profesyonel yazılım geliştirme süreci üç pillar üzerine kuruludur: kaynak kontrolü (Git + GitHub/GitLab pull request akışı, code review zorunlu), CI/CD pipeline (otomatik test + lint + build + deploy), ve gözlemlenebilirlik (Sentry/Datadog/Grafana ile log, metric, trace toplama). Test piramidi (unit > integration > e2e) ile kod kalitesini garantilemek, mikroservis mimarisinde Docker container ve Kubernetes orkestrasyonu kullanmak, REST veya GraphQL API tasarımında OpenAPI/GraphQL Schema sözleşmesi tutmak modern standardlardır. Yazılım geliştirme yaşam döngüsü boyunca (gereksinim - tasarım - implementasyon - test - deploy - bakım) Agile/Scrum sprintleri 1-2 hafta, DevOps takımları sürekli teslim (continuous delivery) prensibiyle çalışır.