Compiler Macro Nedir?

Vue.js'de compiler macro (derleyici makrosu), yalnızca <script setup> içinde kullanılabilen ve derleme sırasında normal JavaScript koduna dönüştürülen özel fonksiyonlardır. <script setup> sözdizimiyle birlikte Vue 3.2'de gelmiştir. Bu fonksiyonlar içe aktarılmaz (import edilmez); Vue derleyicisi onları tanır ve bileşen seçeneklerine çevirir. Çalışma zamanında böyle bir fonksiyon bulunmaz.

En çok kullanılan derleyici makroları

• defineProps: Bileşenin aldığı prop'ları tanımlar.
• defineEmits: Bileşenin yaydığı olayları tanımlar.
• defineExpose: Üst bileşenin template ref ile erişebileceği değerleri belirler.
• withDefaults: TypeScript tipleriyle tanımlanan prop'lara varsayılan değer verir.
• defineModel (Vue 3.4+): v-model ile iki yönlü bağlanan bir değeri tek satırda tanımlar.
• defineOptions ve defineSlots (Vue 3.3+): Bileşen seçeneklerini ve slot tiplerini tanımlar.

Örnek

<script setup>
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 },
});
const emit = defineEmits(['increment']);
</script>

<template>
  <h2>{{ props.title }}</h2>
  <button @click="emit('increment')">Artır ({{ count }})</button>
</template>

Bu örnekte defineProps ve defineEmits import edilmeden kullanılmıştır. Derleyici bu çağrıları bileşenin props ve emits seçeneklerine dönüştürür. Bu yüzden makrolar yalnızca <script setup> bloğunun en üst seviyesinde çağrılabilir; bir fonksiyonun içinde ya da normal bir <script> bloğunda kullanılamazlar.

Bu bileşen (ör. CounterTitle.vue) başka bir bileşende şöyle kullanılır:

<script setup>
import { ref } from 'vue';
import CounterTitle from './CounterTitle.vue';

const count = ref(0);
</script>

<template>
  <CounterTitle title="Sayaç" :count="count" @increment="count++" />
</template>

Not: v-for ile kullanılan :key için en iyi yöntem, her öğenin benzersiz ve kalıcı bir kimliğini (ör. item.id) kullanmaktır. Dizi indeksi, liste sıralandığında veya öğe eklendiğinde yanlış eşleşmelere yol açabilir. Bu bir derleyici makrosu değil, şablon yazım kuralıdır.