Vue 3 Reactivity Transform 2026: $ref, $computed ve Mülakat Soruları

Vue 3 Reactivity Transform, geliştiricilerin reaktivite ile çalışma biçiminde önemli bir değişikliği temsil eder. Composition API sözdizimini basitleştirmek için sunulan bu özellik, 2026 yılında mevcut formuna ulaşmadan önce çeşitli iterasyonlardan geçmiştir. Bu özelliğin nasıl çalıştığını, avantajlarını ve sınırlamalarını anlamak, framework'ün ileri düzey kavramlarına hakim olmak isteyen her Vue geliştiricisi için kritik öneme sahiptir.

Reactivity Transform'un Çözdüğü Problem

Vue 3'ün standart Composition API'si, ref() ile oluşturulan reaktif değerlere erişmek ve bunları değiştirmek için .value kullanımını gerektirir. Bu sözdizimi açık olmakla birlikte, geliştirici .value kullanmayı unuttuğunda ek bilişsel yük getirir ve ince hatalar oluşturabilir.

import { ref, computed } from 'vue'

// Standart Composition API sözdizimi
const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++ // .value gerekli
}

console.log(doubled.value) // .value burada da gerekli

Reactivity Transform, derleme zamanında kodu otomatik olarak dönüştürerek bu ihtiyacı ortadan kaldırır. Reaktivite makroları ile tanımlanan değişkenler, reaktif yapılarını korurken normal JavaScript değişkenleri gibi davranır.

$ref ve $computed Makroları

$ref ve $computed makroları Reactivity Transform'un çekirdeğini oluşturur. .value'yu manuel olarak manipüle etmeye gerek kalmadan reaktif değerler tanımlamaya olanak sağlar.

<script setup>
// Reactivity Transform ile
let count = $ref(0)
const doubled = $computed(() => count * 2)

function increment() {
  count++ // .value gerekli değil
}

console.log(doubled) // Doğrudan erişim
</script>

<template>
  <button @click="increment">{{ count }} (iki katı: {{ doubled }})</button>
</template>

Vue derleyicisi bu kodu, çalıştırmadan önce ref() ve .value kullanan standart sözdizimine dönüştürür. Bu dönüşüm geliştirici için şeffaftır ve kodun davranışını değiştirmez.

Dönüşüm Mekanizması

Derleyici kodu analiz eder ve aşağıdaki dönüşümleri uygular:

1. $ref(value) ifadesi ref(value) olur
2. Değişkene erişimler variable.value haline gelir
3. Atamalar variable.value = newValue olur

// Reactivity Transform ile kaynak kod
let message = $ref('Merhaba')
message = 'Güle güle'
console.log(message)

// Derleyici tarafından dönüştürülen kod
const message = ref('Merhaba')
message.value = 'Güle güle'
console.log(message.value)

Vite ile Reactivity Transform Yapılandırması

Reactivity Transform'u etkinleştirmek, Vue projesinde özel yapılandırma gerektirir. 2026'da bu özellik, @vue/reactivity-transform eklentisi aracılığıyla sağlanmaktadır.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { reactivityTransform } from '@vue/reactivity-transform'

export default defineConfig({
  plugins: [
    vue(),
    reactivityTransform()
  ]
})

TypeScript kullanan projeler için ek yapılandırma, makro tiplerinin tanınmasını sağlar.

{
  "compilerOptions": {
    "types": ["@vue/reactivity-transform"]
  }
}

$shallowRef ve Diğer İleri Düzey Makrolar

$ref ve $computed'ın yanı sıra, Reactivity Transform belirli kullanım durumları için başka makrolar da içerir.

<script setup>
import { watchEffect } from 'vue'

// Büyük nesneler için $shallowRef
let largeObject = $shallowRef({ data: [], metadata: {} })

// Yalnızca referans reaktiftir, iç özellikler değil
largeObject = { data: [1, 2, 3], metadata: { updated: true } }

// Prop'u ref'e dönüştürmek için $toRef
const props = defineProps<{ initialValue: number }>()
let value = $(props.initialValue) // toRef(props, 'initialValue') eşdeğeri

watchEffect(() => {
  console.log('Değer değişti:', value)
})
</script>

Reaktif Destructuring için $() Makrosu

$() makrosu, reaktif nesnelerin her özelliğinin reaktivitesini koruyarak destructuring yapılmasını sağlar.

<script setup>
import { reactive } from 'vue'

const state = reactive({
  firstName: 'Ahmet',
  lastName: 'Yılmaz',
  age: 30
})

// Reaktiviteyi koruyarak destructuring
const { firstName, lastName } = $(state)

// firstName ve lastName reaktif kalır
function updateName() {
  firstName = 'Mehmet' // state.firstName'i değiştirir
}
</script>

Composable'larla Entegrasyon

Reactivity Transform, composable'larla doğal olarak entegre olur ve kullanımlarını ve oluşturulmasını basitleştirir.

export function useCounter(initial = 0) {
  let count = $ref(initial)
  const doubled = $computed(() => count * 2)
  const isEven = $computed(() => count % 2 === 0)

  function increment() {
    count++
  }

  function decrement() {
    count--
  }

  function reset() {
    count = initial
  }

  // $$() ref'leri dönüş için standart ref nesnelerine dönüştürür
  return $$({ count, doubled, isEven, increment, decrement, reset })
}

Composable kullanımı daha sezgisel hale gelir.

<script setup>
import { useCounter } from '@/composables/useCounter'

// $() ile destructuring reaktiviteyi korur
const { count, doubled, increment, reset } = $(useCounter(10))
</script>

<template>
  <div>
    <p>Sayaç: {{ count }} (İki Katı: {{ doubled }})</p>
    <button @click="increment">+</button>
    <button @click="reset">Sıfırla</button>
  </div>
</template>

Reactivity Transform ile Props Yönetimi

Props'ların yerel olarak değiştirilebilir reaktif ref'lere dönüştürülmesi, Reactivity Transform'un sık karşılaşılan bir kullanım durumudur.

<script setup>
const props = defineProps<{
  modelValue: string
  disabled?: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

// Prop'a bağlı yerel ref oluşturma
let localValue = $ref(props.modelValue)

// Çift yönlü senkronizasyon
watch(
  () => props.modelValue,
  (newVal) => { localValue = newVal }
)

watch(
  () => localValue,
  (newVal) => { emit('update:modelValue', newVal) }
)
</script>

<template>
  <input v-model="localValue" :disabled="disabled" />
</template>

Reactivity Transform Hakkında Teknik Mülakat Soruları

Vue 3 teknik mülakatları sıklıkla Reactivity Transform hakkında sorular içerir. Aşağıdaki sorular en yaygın karşılaşılan konuları temsil etmektedir.

Soru 1: $ref ile ref arasındaki fark nedir?

Beklenen Cevap: $ref, .value'ya otomatik erişimle ref() kullanan kod üreten bir derleme makrosudur. Fark, kaynak kod düzeyinde tamamen sözdizimseldir. Çalışma zamanında her ikisi de aynı sonucu üretir. $ref, .value yazma ihtiyacını ortadan kaldırarak geliştirici ergonomisini artırır.

Soru 2: Composable'dan değer döndürürken neden $$() kullanılmalı?

Beklenen Cevap: $$() makrosu, Reactivity Transform tarafından dönüştürülen değişkenleri standart ref nesnelerine çevirir. Bu dönüşüm olmadan, döndürülen değerler reaktivitelerini kaybeden ilkel değerler olurdu. $$(), composable tüketicisinin destructuring için $() ile kullanabileceği reaktif ref'ler almasını sağlar.

Soru 3: Reactivity Transform Options API ile çalışır mı?

Beklenen Cevap: Hayır. Reactivity Transform yalnızca <script setup> ile Composition API için tasarlanmıştır. Derleme zamanında statik kod analizine dayanır, bu da Options API'nin dinamik yapısıyla uyumlu değildir.

Soru 4: Reactivity Transform kullanan kod nasıl debug edilir?

Beklenen Cevap: Geliştirici araçlarında görünen kaynak kod, orijinal değil dönüştürülmüş koddur. Etkili debug için source map'lerin kullanılması ve uygulanan dönüşümün anlaşılması önerilir. Vue DevTools, kullanılan sözdiziminden bağımsız olarak reaktif değerleri doğru şekilde görüntüler.

// Debug sırasında temel ref'i görmek için
let count = $ref(0)
console.log($$(count)) // Tam ref nesnesini görüntüler

Soru 5: Reactivity Transform'un yaygın tuzakları nelerdir?

Beklenen Cevap: Başlıca tuzaklar şunlardır:

• Fonksiyonlardan değer döndürürken $$() kullanmayı unutmak
• Aynı dosyada standart sözdizimi ve dönüştürülmüş sözdizimini karıştırmak
• Tüm JavaScript işlemlerinin aynı şekilde çalıştığını varsaymak (bazı karmaşık atamalar özel dikkat gerektirebilir)
• TypeScript'i makro tiplerini tanıyacak şekilde doğru yapılandırmamak

Standart Sözdizimi ile Karşılaştırma

Doğrudan karşılaştırma, iki yaklaşım arasındaki farkları gösterir.

<!-- Reactivity Transform olmadan -->
<script setup>
import { ref, computed, watch } from 'vue'

const items = ref<string[]>([])
const filter = ref('')
const filteredItems = computed(() =>
  items.value.filter(item => item.includes(filter.value))
)

function addItem(item: string) {
  items.value.push(item)
}

watch(filter, (newFilter) => {
  console.log('Filtre değişti:', newFilter)
})
</script>

<!-- Reactivity Transform ile -->
<script setup>
import { watch } from 'vue'

let items = $ref<string[]>([])
let filter = $ref('')
const filteredItems = $computed(() =>
  items.filter(item => item.includes(filter))
)

function addItem(item: string) {
  items.push(item)
}

watch($$(filter), (newFilter) => {
  console.log('Filtre değişti:', newFilter)
})
</script>

İyi Uygulamalar ve Öneriler

Mevcut bir projede Reactivity Transform'u benimsemek, kod tutarlılığını korumak için metodik bir yaklaşım gerektirir.

Proje içinde tutarlılık: Bir yaklaşım (standart veya dönüştürülmüş) seçilmeli ve tutarlı bir şekilde uygulanmalıdır. Her iki sözdizimini karıştırmak, kodun okunmasını ve bakımını zorlaştırır.

Açık dokümantasyon: Proje README'sinde ve katkı rehberlerinde Reactivity Transform kullanımının belgelenmesi gerekir. Yeni geliştiriciler kullanılan sözdizimini anlamalıdır.

Birim testleri: Testler, kullanılan sözdiziminden bağımsız olarak aynı şekilde çalışır çünkü kod çalıştırmadan önce dönüştürülür. Migrasyon sırasında mevcut testlerde değişiklik gerekmez.

Kademeli migrasyon: Mevcut projeler için her şeyi aynı anda dönüştürmek yerine dosya dosya migrasyon yapılmalıdır. Bu yaklaşım hata riskini azaltır.

Reactivity Transform, Vue 3 geliştirme ergonomisinde önemli bir iyileştirmeyi temsil eder. Bu özelliğe hakimiyet, Vue'nun reaktivite sisteminin derinlemesine anlaşıldığını gösterir ve kıdemli Vue geliştirici pozisyonları için teknik mülakatlarda önemli bir avantaj sağlar.