Laravel Livewire, doğrudan JavaScript kodu yazmadan bir web sayfasında dinamik davranış elde etmek için harika bir araçtır. Laravel'in rahatlığını bırakmadan dinamik arabirimler oluşturmayı basitleştirir. Son zamanlarda, Livewire çekirdeği tamamen yeniden yazıldı.
Yeni Livewire v3 daha iyi farklılaşmaya sahiptir, özellikler daha hızlı oluşturulabilir ve daha az tekrar vardır Livewire ve Alpine arasında çünkü Alpine'a daha çok güvenir ve Morph, History ve diğer özelliklerini kullanır. eklentiler. Kod tabanı yeniden yapılandırılarak ve Alpine'e daha fazla vurgu yapılarak yeni özelliklerin birçoğu da mümkün kılındı.
1. Livewire Komut Dosyalarını, Stilleri ve Alpine Otomatik Olarak Enjekte Edin
Besteci Livewire v2'yi kurduktan sonra, mizanpajınıza manuel olarak @livewireStyles, @livewireScripts ve Alpine eklemelisiniz. Livewire v3 ile, sadece Livewire'ı yüklemeniz yeterlidir ve ihtiyacınız olan her şey otomatik olarak enjekte edilir - Alpine dahil!
<!DOCTYPE html>
<html dili="tr">
<KAFA>
<komut dosyası kaynağı=
"//unpkg.com/alpinejs" ertelemek></script>
@livewireStyles@livewireScripts
</head>
<vücut>
...
</body>
</html>2. PHP sınıflarında JavaScript İşlevleri
Livewire v3, JavaScript işlevlerinin doğrudan arka uç Livewire bileşenlerinize yazılmasını destekleyecektir. Bileşeninize bir işlev ekleyin, işlevin üstüne bir /\*_ @js _/ yorumu ekleyin, ardından PHP'nin HEREDOC sözdizimini kullanarak bazı JavaScript kodları döndürün ve ön uçtan çağırın. JavaScript kodu, arka ucunuza herhangi bir istek gönderilmeden yürütülecektir.
<?php
ad alanıUygulama\Http\canlı tel;
sınıfYapılacaklaruzanır \canlı tel\Bileşen
{
/** @prop */
halk $todos;
/** @js */
halkişlevtemizlemek()
{
geri dönmek <<<'JS'
this.todo = '';
JS;
}
}
?>
<div>
<giriş kablosu: model="yapmak" />
<düğme teli: tıklayın="temizlemek">Temizlemek</button>
</div>3. Kilitli Özellikler
Livewire v3, ön uçtan güncellenemeyen kilitli özellikleri destekleyecektir. Bileşeninizdeki bir özelliğin üstüne bir /\*\* @locked / comment ekleyin ve birisi bu özelliği ön uçtan güncellemeye çalışırsa Livewire bir istisna atar.
<?php
ad alanıUygulama\Http\canlı tel;
sınıfYapılacaklaruzanır \canlı tel\Bileşen
{
/** @kilitli */
halk $todos = [];
}
?>4. Tel: model Varsayılan Olarak Ertelenir
Livewire ve kullanımı geliştikçe, "ertelenmiş" davranışın formların %95'i için daha anlamlı olduğunu fark ettik, dolayısıyla v3'te "ertelenmiş" işlevsellik varsayılan olacaktır. Bu, sunucunuza giden gereksiz isteklerden tasarruf sağlayacak ve performansı artıracaktır. Bir girişte "canlı" işlevselliğe ihtiyaç duyduğunuzda, bu işlevi etkinleştirmek için wire: model.live kullanabilirsiniz.
Bu, v2'den v3'e çok az sayıda önemli değişiklikten biridir.
5. İstekler Topludur
Livewire v2'de, wire: poll veya kullanan birden çok bileşeniniz varsa olayları gönderme ve dinleme, bu bileşenlerin her biri, her anket veya olayda sunucuya ayrı istekler gönderecektir. Livewire v3'te isteklerin akıllı bir şekilde gruplanması vardır, böylece teller: anketler, olaylar, dinleyiciler ve yöntem çağrıları, mümkün olduğunda tek bir istekte toplanarak daha da fazla istek kaydedilebilir ve iyileştirme verim.
6. Reaktif Özellikler
Livewire v3'te, bir parça veriyi bir alt bileşene iletmek , alt öğedeki özelliğin üzerine bir/\*_ @prop _/ yorum ekleyin, ardından bunu üst bileşende güncelleyin, alt bileşende güncellenecektir.
<?php
ad alanıUygulama\Http\canlı tel;
sınıfYapılacaklar Sayısıuzanır \canlı tel\Bileşen{
/** @prop */
halk $todos;
halkişlevişlemek(){
geri dönmek <<<'HTML'
<div>
Yapılacaklar: {{ count($todos) }}
</div>
HTML;
}
}7. $parent Kullanarak Üst Bileşenin Verilerine ve Yöntemlerine Erişin
Livewire v3'te, bir ana bileşenin verilerine ve yöntemlerine erişmenin yeni bir yolu olacaktır. Üst öğedeki yöntemleri çağırmak için erişilebilen yeni bir $parent özelliği var.
<?php
ad alanıUygulama\Http\canlı tel;
sınıfYapılacak Girişuzanır \canlı tel\Bileşen{
/** @modellenebilir */
halk $değer = '';
halkişlevişlemek(){
geri dönmek <<<'HTML'
<div>
<giriş kablosu: model="değer" tel: keydown.enter="$parent.add()">
</div>
HTML;
}
}8. ışınlanma
Livewire v3 ayrıca, bir işaretleme parçasını "ışınlamanıza" ve onu DOM'un başka bir parçası haline getirmenize izin verecek yeni bir @teleport Blade yönergesi içerecektir. Bu, bazen kipler ve kayan öğelerle ilgili z-dizini sorunlarını önlemeye yardımcı olabilir.
<div>
<düğme teli: tıklayın="showModal">Kip göster</button>
@ışınlanma('#alt bilgi')
<x-modlu tel: model="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Tembel Bileşenler
Livewire v3'te, bir bileşen oluşturulurken sadece tembel bir öznitelik ekleyin ve başlangıçta oluşturulmayacaktır. Görünüm alanına geldiğinde, Livewire onu işlemek için bir istek gönderir. Ayrıca, bileşeninize yer tutucu yöntemini uygulayarak yer tutucu içerik ekleyebileceksiniz.
<div>
<düğme teli: tıklayın="showModal">Kip göster</button>
@ışınlanma('#alt bilgi')
<x-modlu tel: model="showModal">
<livewire: örnek bileşen tembel />
</x-modal>
@endteleport
</div>
<?php
ad alanıUygulama\Http\canlı tel;
SınıfÖrnek Bileşenuzanır \canlı tel\Bileşen{
halkstatikişlevYer tutucu(){
geri dönmek <<<'HTML'
<x-döndürücü />
>>>
}
halk işlev işlemek()/** [tl! daralt: 7] */{
geri dönmek <<<'HTML'
<div>
Yapılacaklar: {{count($todos) }}
</div>
HTML;
}
}
?>Livewire V3'te Sadelik ve Güç
Sadelik ve gücün birleşimi, Laravel Canlı Tel çok harika ve neden bu kadar çok geliştirici tarafından kullanılıyor. Özellikle Laravel + Inertia + Vue kombinasyonuna iyi bir alternatiftir. Özellikle Laravel, güçlü ve birlikte çalışılması gereken diğer çerçevelerle birlikte paketlenmiştir.