Macro Nedir?

Vue.js dünyasında "macro" (makro) denildiğinde genellikle iki şey kastedilir: Vue'nun kendi derleyici makroları ve topluluk tarafından geliştirilen Vue Macros projesi. İkisinin ortak noktası, derleme sırasında normal koda dönüştürülmeleri ve çalışma zamanına ek maliyet getirmemeleridir.

1. Derleyici makroları

Derleyici makroları, <script setup> içinde import edilmeden kullanılan fonksiyonlardır: defineProps, defineEmits, defineExpose, withDefaults, defineModel, defineOptions ve defineSlots. Ayrıntılar ve örnekler için Vue.js Compiler Macro Nedir? yazısına bakabilirsiniz.

<script setup>
const props = defineProps({ name: String });

// Üst bileşen, template ref üzerinden greet() metodunu çağırabilir
defineExpose({ greet: () => `Merhaba ${props.name}` });
</script>

<template>
  <p>Merhaba, {{ name }}!</p>
</template>

2. Vue Macros projesi

Vue Macros, Vue'nun henüz resmî olarak sunmadığı makroları deneysel olarak sağlayan bir topluluk projesidir. Vite veya webpack eklentisi olarak projeye eklenir. Bu projede denenen bazı fikirler zamanla Vue'nun kendisine alınmıştır; defineOptions buna bir örnektir.

Neden makro?

• Daha az şablon kod (boilerplate) yazılır.
• TypeScript tip çıkarımı iyileşir.
• Bileşen tanımı daha kısa ve okunur olur.

Buna karşılık makrolar bir derleme adımı gerektirir ve yalnızca <script setup> bloğunun en üst seviyesinde çalışır.