Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

Vue.js DRY Kod Yazımı ve Temiz Kod: Slots, Mixins ve Composition API

Anahtar Kelime: Vue.js DRY kod yazımı

Bu Rehberde Ne Öğreneceksiniz?​

Bu rehber Vue.js projelerinde tekrar eden kodları azaltmayı öğretir.
Slots, Mixins ve Composition API ile temiz kod mimarisi kurarsınız.
Spagetti koddan kurtulup ölçeklenebilir yapı oluşturursunuz.

Teknik Özet​

  • Konu: Vue.js’te DRY (Temiz Kod) prensibi
  • Problem: Tekrarlanan template ve logic
  • Çözüm: Slots, Mixins ve Composition API
  • Sonuç: Daha okunabilir ve sürdürülebilir kod

DRY (Don’t Repeat Yourself) Nedir?​

DRY, kod tekrarını önlemeyi hedefler.
Amaç, kopyala-yapıştır yerine modüler yapı kurmaktır.
Bu yaklaşım bakım maliyetini ciddi şekilde düşürür.

Ön Gereksinimler​

  • Node.js 14.16.0 veya üzeri
  • Vue CLI kurulu olmalı
  • Vue 3 temel bilgisi
  • HTML, CSS ve JavaScript bilgisi

1️⃣ Slots ile Esnek ve Tekrarsız Layout Yapısı​

Slots, tekrar eden HTML iskeletini ortadan kaldırır.
Layout bileşenleri sayfa düzenini merkezileştirir.

<template>
  <div class="container">
    <slot />
  </div>
</template>
  • Bu yapı tüm sayfalar için ortak kapsayıcı sağlar.

2️⃣ Mixins ile Ortak Mantık Paylaşımı​

  1. Mixins, birden fazla bileşende aynı fonksiyonları kullanmayı sağlar.
  • Ancak büyük projelerde karmaşa oluşturabilir.

export default {
  methods: {
    bolgeFormatla(bolge) {
      return `${bolge.isim} (${bolge.kod})`
    }
  }
}
  • Küçük projelerde hızlı çözüm sunar.

3️⃣ Composition API ile Modern ve Temiz Mimari​

  1. Composition API, Vue 3’ün önerilen yaklaşımıdır.
  2. Logic tek bir setup() fonksiyonunda toplanır.

import { ref, onMounted } from 'vue'
import &#123; useRoute &#125; from 'vue-router'

setup() {
  const route = useRoute()
  const formatliIsim = ref('')

  onMounted(() => {
    formatliIsim.value = route.params.kod
  })

  return &#123; formatliIsim &#125;
}
  • Bu yapı mixin karmaşasını ortadan kaldırır.

Composition API’nin Avantajları​

1. Netlik: this karmaşası yoktur

2. Modülerlik: Kod mantığa göre gruplanır

3. Ölçeklenebilirlik: Büyük projelerde düzen sağlar

4. TypeScript uyumu: Güçlü tip desteği sunar

Slots, Mixins ve Composition API Karşılaştırması

YöntemNe Sağlar
SlotsTemplate tekrarını azaltır
MixinsOrtak logic paylaşımı
Composition APITemiz ve ölçeklenebilir yapı

❓ Sıkça Sorulan Sorular​

1. Mixins mi Composition API mi tercih edilmeli? Vue 3 projelerinde Composition API önerilir.

2. Slot kullanımı performansı etkiler mi? Hayır, slotlar derleme aşamasında optimize edilir.

3. ref ile reactive arasındaki fark nedir? ref ilkel değerler içindir. reactive objeler için kullanılır.

4. setup() içinde neden this yok? setup, bileşen oluşturulmadan önce çalışır.

Sonuç​

Bu rehberde Vue.js’te DRY ve temiz kod mimarisini öğrendiniz. Slots ile HTML tekrarını kaldırdınız. Composition API ile modern ve sürdürülebilir yapı kurdunuz.

Projelerinizi yüksek performanslı altyapıda yayınlamak için Rabisu Bulut çözümlerini hemen deneyebilirsiniz.