Livewire 3 Rehberi: Bileşen, Veri Bağlama ve Yaşam Döngüsü

Livewire 3'ün Getirdiği Model

Livewire, Laravel tarafında yazdığınız bileşen sınıfını bir Blade şablonuyla eşleştirip, kullanıcı etkileşimlerinde sayfa yenilemeden sunucuya istek atmanızı sağlar. Livewire 3, önceki sürümlere göre Alpine.js entegrasyonunu ve istek yaşam döngüsünü yeniden düzenledi; wire: yönergeleri ve #[...] öznitelik (attribute) sözdizimi bu sürümde temel alınmalıdır.

Bu rehber orta seviye bir Laravel geliştiricisini hedefler. Önkoşullar: çalışan bir Laravel uygulaması, Composer ve temel Blade bilgisi. Livewire 3, Laravel 10 ve üzeri sürümlerle uyumludur; kurulum komutunun çekeceği tam sürüm numarasını burada sabitlemiyorum, composer.json içindeki kısıtı kontrol edin.

Kurulum ve İlk Bileşen

Livewire'ı Composer ile ekleyin:

composer require livewire/livewire

Ardından bir bileşen oluşturun:

php artisan make:livewire Counter

Bu komut iki dosya üretir: app/Livewire/Counter.php sınıfı ve resources/views/livewire/counter.blade.php şablonu. Sınıf, Livewire\Component temel sınıfını genişletir ve render() metodu şablonu döndürür.

<?php

namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public int $count = 0;

    public function increment(): void
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Şablonda durumu göstermek ve metoda bağlanmak için wire: yönergelerini kullanın:

<div>
    <button wire:click="increment">Artır</button>
    <span>{{ $count }}</span>
</div>

Bileşeni bir sayfaya yerleştirmek için Blade içinde etiket veya @livewire yönergesi kullanılabilir:

<livewire:counter />

wire:click tetiklendiğinde Livewire, bileşen durumunu sunucuya gönderir, increment() metodunu çalıştırır ve dönen HTML'i sayfaya yerleştirir. Sayfa yenilenmez.

Veri Bağlama ve Formlar

Girdi alanlarını bileşen özelliklerine bağlamak için wire:model kullanılır. Livewire 3'te varsayılan davranış gecikmeli (deferred) bağlamadır; yani değer, bir sonraki Livewire isteğinde sunucuya gönderilir. Her tuş vuruşunda senkronize etmek istiyorsanız wire:model.live kullanın.

<input type="text" wire:model="title">
<input type="text" wire:model.live="title">

Form doğrulaması Laravel'in doğrulama API'siyle aynıdır:

public string $title = '';

public function save(): void
{
    $validated = $this->validate([
        'title' => ['required', 'string', 'max:255'],
    ]);

    // $validated['title'] güvenli kabul edilebilir
}

Doğrulama hatları $errors üzerinden şablonda gösterilebilir. wire:model ile bağlanan değerlerin istemciden geldiğini unutmayın; doğrulama sunucuda yapılmalıdır.

Yaşam Döngüsü Kancaları

Livewire bileşenleri mount(), updated(), hydrate() gibi kancalar sunar. mount() yalnızca bileşen ilk oluşturulduğunda çalışır; sonraki isteklerde çalışmaz. Başlangıç verisini burada yükleyin.

public function mount(int $initial = 0): void
{
    $this->count = $initial;
}

public function updated(string $property): void
{
    // $property değiştiğinde tetiklenir
}

updated kancasını belirli bir özelliğe daraltmak için updatedTitle() gibi adlandırma kullanılabilir. Bu kancalar, durum değişimlerine bağlı ek işlemler (örneğin arama) için uygundur; ancak her tetiklemede sunucuya istek gideceğini hesaba katın.

Olaylar ve Bileşenler Arası İletişim

Bir bileşen olay yayabilir, başka bir bileşen bunu dinleyebilir:

// Yayan bileşen
$this->dispatch('post-created', postId: $post->id);

// Dinleyen bileşen
use Livewire\Attributes\On;

#[On('post-created')]
public function refreshList(int $postId): void
{
    // listeyi güncelle
}

dispatch çağrısındaki adlandırılmış argümanlar, dinleyici metodun parametrelerine karşılık gelir. Olay adlarını uygulama genelinde tutarlı tutmak, bakımı kolaylaştırır.

Sık Yapılan Hatalar

Doğrulamayı atlamak. wire:model ile gelen veri istemci kaynaklıdır; validate() çağırmadan veritabanına yazmak güvenlik açığı oluşturur.

Geniş wire:model.live kullanımı. Her tuş vuruşunda istek gitmesi, sunucu yükünü ve gecikmeyi artırır. Yalnızca gereken alanlarda .live kullanın; arama gibi senaryolarda wire:model.live.debounce.300ms gibi değiştiricilerle istek sıklığını sınırlayın.

Bileşen içinde hassas veri tutmak. Livewire, genel (public) özellikleri istemciye serileştirir. Parola, token veya yetkiye bağlı gizli değerleri public özellikte tutmayın; bunları sunucuda mount() veya sorgu sırasında türetin.

Yetkilendirmeyi unutmak. Bir metot içinde $this->authorize(...) veya politika kontrolü yapmadan kaynak güncellemek, başka kullanıcıların verisine erişime yol açabilir.

N+1 sorgular. render() içinde ilişkileri döngüde yüklemek yerine with() ile önceden yükleyin; Livewire her istekte render() çalıştırdığı için bu etki artar.

Güvenlik Notları

Livewire, bileşen durumunu istemci ile sunucu arasında taşır. Genel özellikler kullanıcı tarafından değiştirilebilir kabul edilmelidir. Yetkilendirme, doğrulama ve iş kuralları her zaman sunucu tarafında uygulanmalı; istemcideki wire: yönergeleri bir güvenlik sınırı değildir. Kullanıcıya özel verileri şablonda göstermeden önce erişim kontrolünü yapın.

Ne Zaman Livewire, Ne Zaman Değil

Livewire, sunucu tarafı ağırlıklı, form ve liste odaklı arayüzlerde hızlı geliştirme sağlar. Yoğun istemci tarafı etkileşim, çevrimdışı çalışma veya düşük gecikmeli anlık geri bildirim gerektiren ekranlarda JavaScript çerçeveleri daha uygun olabilir. Karar verirken istek sayısını, gecikme beklentisini ve ekibin mevcut bilgi birikimini birlikte değerlendirin.