Vue Makroları ve Topluluk Önerileri
vue-macros kütüphanesi, deneysel defineModel, defineOptions ve setupSFC önerileri.
Vue Makroları ve Topluluk Önerileri, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
script setup İçindeki Derleyici Makroları
<script setup> içinde Vue, derleme zamanında işlenen ve çalışma zamanında içe aktarılmayan derleyici makroları sağlar. Bunlara defineProps ve defineEmits gibi işlevler dahildir. Vue 3.4 ve sonraki sürümlerde daha fazlası eklendi; topluluk projesi vue-macros ise daha da fazlasını deniyor.
vue-macros: Bir Deney Alanı
vue-macros, Vue çekirdeğinden önce (veya onun ötesinde) deneysel makrolar sunan bir topluluk kütüphanesidir. Başarılı fikirler bazen çekirdeğe dahil edilir — defineModel, kararlı hâle gelmeden önce burada başladı.
// vite.config
import VueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [VueMacros({ plugins: { vue: vue() } })]
})defineModel: Eski Yöntem
defineModel kullanılmadan önce, bir bileşende v-model uygulamak için modelValue prop'unu tanımlamak ve update:modelValue olayını elle göndermek gerekiyordu; bu yöntem hem uzundu hem de hataya açıktı.
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) {
emit('update:modelValue', e.target.value)
}
</script>defineModel: Vue 3.4'te Kararlı
defineModel, Vue 3.4'te kararlı hâle geldi. Prop'a ve güncelleme olayına otomatik olarak bağlanan, yazılabilir bir ref döndürür. Ref'i okumak değeri verir; ona atama yapmak güncellemeyi gönderir.
<script setup>
const model = defineModel()
// model.value reads modelValue
// model.value = x emits update:modelValue
</script>
<template>
<input v-model="model" />
</template>Adlandırılmış ve Türü Belirtilmiş defineModel
defineModel, adlandırılmış modelleri (v-model:title) ve required ile tür gibi seçenekleri destekler; bu yönüyle defineProps'u yansıtır.
<script setup>
const title = defineModel('title', { type: String, required: true })
const count = defineModel('count', { default: 0 })
</script>Birden Çok v-model Artık Kolay
Adlandırılmış modellerle bir bileşen, daha önce çok sayıda prop/emit çifti gerektiren bir işi, birkaç iki yönlü bağlamayı temiz bir şekilde dışa açabilir.
<!-- parent -->
<UserForm v-model:name="name" v-model:email="email" />
<!-- UserForm script setup -->
<!-- const name = defineModel('name') -->
<!-- const email = defineModel('email') -->defineOptions
defineOptions (Vue 3.3'te kararlı hâle gelmiştir), name ve inheritAttrs gibi bileşen seçeneklerini doğrudan <script setup> içinde ayarlamanıza olanak tanır; böylece ikinci bir <script> bloğuna gerek kalmaz.
<script setup>
defineOptions({
name: 'UserCard',
inheritAttrs: false
})
</script>name ve inheritAttrs Neden Önemli
Bir bileşenin name seçeneği, geliştirme araçlarına, özyinelemeye ve <KeepAlive> include/exclude özelliğine yardımcı olur. inheritAttrs: false, özniteliklerin otomatik olarak aktarılmasını durdurur; böylece öznitelikleri v-bind="$attrs" aracılığıyla belirli bir iç elemana yerleştirebilirsiniz.
<script setup>
defineOptions({ inheritAttrs: false })
</script>
<template>
<div class="wrapper">
<input v-bind="$attrs" />
</div>
</template>Diğer Önemli Makrolar
Vue ayrıca defineExpose (üst bileşen ref'inin erişebileceklerini denetler), defineSlots (slot'ların türünü belirtir) ve withDefaults (tür tabanlı props için varsayılan değerler) makrolarını da sunar. Bunları bilmek, <script setup> araç setini tamamlar.
<script setup lang="ts">
const props = withDefaults(
defineProps<{ size?: 'sm' | 'lg' }>(),
{ size: 'sm' }
)
defineExpose({ focus })
</script>Deneysel ve Kararlı: Dikkatle Seçin
Çekirdekte bulunan kararlı makrolar (defineModel, defineOptions) üretimde güvenle kullanılabilir. vue-macros deneyleri prototip oluşturma ve erken benimseme için yararlıdır, ancak API'ler değişebilir; bu nedenle üretime sunulan uygulamalarda bunları dikkatle sınırlandırın.
Topluluk Önerilerini Takip Etme
Yeni fikirler RFC'ler ve vue-macros içinde ortaya çıkar. Bunları takip etmek, çerçevenin hangi yöne ilerlediğini önceden görmenize ve özellikler kararlı hâle gelmeden önce geri bildirim vermenize yardımcı olur.
Kısa Sınama
Vue makroları hakkındaki anlayışınızı sınayın.
Özet
Makrolar ve öneriler hakkında şunları öğrendiniz:
vue-macrosdeneysel makrolara ev sahipliği yapar; bazıları çekirdeğe dahil edilir- defineModel (3.4'te kararlı) bileşenlerdeki
v-modelkullanımını basitleştirir - Adlandırılmış ve türü belirtilmiş modeller, birden çok temiz iki yönlü bağlamayı mümkün kılar
- defineOptions,
<script setup>içindename/inheritAttrsayarlarını yapar - Üretimde kararlı makroları tercih edin; deneysel özellikleri dikkatle kullanın
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 42
- Dersler
- 156
Sıkça Sorulan Sorular
“Vue Makroları ve Topluluk Önerileri” dersi ücretsiz mi?
Evet — “Vue Makroları ve Topluluk Önerileri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Vue Makroları ve Topluluk Önerileri” dersinde ne öğreneceğim?
vue-macros kütüphanesi, deneysel defineModel, defineOptions ve setupSFC önerileri. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Vue Makroları ve Topluluk Önerileri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Vue Vapor Modu: Derleme Zamanı Optimizasyonu
- Vite Ekosistemi: Eklentiler ve Araçlar
- Vue Makroları ve Topluluk Önerileri
- 2025 ve Sonrası için Doğru Vue Yığınını Seçme