Laravel Livewire adalah alat yang hebat untuk mencapai perilaku dinamis pada halaman web, tanpa langsung menulis kode JavaScript. Itu membuat membangun antarmuka dinamis menjadi sederhana, tanpa meninggalkan kenyamanan Laravel. Baru-baru ini, inti Livewire telah sepenuhnya ditulis ulang.

Livewire v3 yang baru memiliki diffing yang lebih baik, fitur dapat dibangun lebih cepat, dan duplikasi lebih sedikit antara Livewire dan Alpine karena lebih mengandalkan Alpine dan menggunakan Morph, History, dan lainnya plugin. Beberapa fitur baru juga dimungkinkan dengan merestrukturisasi basis kode dan memberi penekanan lebih besar pada Alpine.

1. Inject Livewire Scripts, Styles, dan Alpine Secara Otomatis

Setelah komposer menginstal Livewire v2, Anda harus menambahkan @livewireStyles, @livewireScripts, dan Alpine secara manual ke tata letak Anda. Dengan Livewire v3, Anda hanya perlu menginstal Livewire dan semua yang Anda perlukan diinjeksi secara otomatis - termasuk Alpine!

<!DOCTYPE html>
<html bahasa=





instagram viewer


"en">
<kepala>
<skrip src="//unpkg.com/alpinejs" menunda></script>
@livewireStyles@livewireScripts
</head>
<tubuh>
 ...
</body>
</html>

2. Fungsi JavaScript di kelas PHP

Livewire v3 akan mendukung penulisan fungsi JavaScript langsung di komponen Livewire backend Anda. Tambahkan fungsi ke komponen Anda, tambahkan komentar /\*_ @js _/ di atas fungsi, lalu kembalikan beberapa kode JavaScript menggunakan sintaks HEREDOC PHP dan panggil dari frontend Anda. Kode JavaScript akan dijalankan tanpa mengirimkan permintaan apa pun ke backend Anda.

<?php
ruang namaAplikasi\Http\Kawat listrik;
kelasSemuanyamemanjang \Kawat listrik\Komponen
{
/** @menopang */
publik $todo;
/** @js */
publikfungsijernih()
 {
 kembali <<<'JS'
 this.todo = '';
 JS;
 }
}
?>
<div>
<kabel masukan: model="melakukan" />
<kabel tombol: klik ="jernih">Jernih</button>
</div>

3. Properti Terkunci

Livewire v3 akan mendukung properti terkunci - properti yang tidak dapat diperbarui dari frontend. Tambahkan /\*\* @locked / komentar di atas properti pada komponen Anda, dan Livewire akan melontarkan pengecualian jika seseorang mencoba memperbarui properti itu dari frontend.

<?php
ruang namaAplikasi\Http\Kawat listrik;
kelasSemuanyamemanjang \Kawat listrik\Komponen
{
/** @terkunci */
publik $todos = [];
}
?>

4. Kawat: model Ditangguhkan secara Default

Karena Livewire dan penggunaannya telah berkembang, kami menyadari bahwa perilaku "ditangguhkan" lebih masuk akal untuk 95% formulir, jadi di v3 fungsi "ditangguhkan" akan menjadi default. Ini akan menghemat permintaan yang tidak perlu ke server Anda dan meningkatkan kinerja. Saat Anda membutuhkan fungsionalitas "live" pada input, Anda dapat menggunakan wire: model.live untuk mengaktifkan fungsionalitas tersebut.

Ini adalah salah satu dari sedikit perubahan yang merusak dari v2 ke v3.

5. Permintaan Dikumpulkan

Di Livewire v2, jika Anda memiliki banyak komponen menggunakan wire: poll atau pengiriman dan mendengarkan acara, masing-masing komponen tersebut akan mengirimkan permintaan terpisah ke server pada setiap jajak pendapat atau acara. Di Livewire v3, ada kumpulan permintaan yang cerdas sehingga kawat: jajak pendapat, acara, pendengar, dan panggilan metode dapat digabungkan menjadi satu permintaan bila memungkinkan, menyimpan lebih banyak permintaan dan meningkatkan pertunjukan.

6. Properti Reaktif

Di Livewire v3, saat Anda meneruskan sepotong data ke komponen anak , tambahkan a/\*_ @prop _/ komentar di atas properti di anak, lalu perbarui di komponen induk, itu akan diperbarui di komponen anak.

<?php
ruang namaAplikasi\Http\Kawat listrik;
kelasTodosCountmemanjang \Kawat listrik\Komponen{
/** @menopang */
publik $todo;
publikfungsimemberikan(){
 kembali <<<'HTML'
<div>
 Todos: {{ count($todos) }}
</div>
 HTML;
 }
 }

7. Mengakses Data dan Metode Komponen Induk Menggunakan $parent

Di Livewire v3, akan ada cara baru untuk mengakses data dan metode komponen induk. Ada properti $parent baru yang dapat diakses untuk memanggil metode pada induknya.

<?php
ruang namaAplikasi\Http\Kawat listrik;
kelasTodoInputmemanjang \Kawat listrik\Komponen{
/** @ dapat dimodelkan */
publik $nilai = '';
publikfungsimemberikan(){
 kembali <<<'HTML'
<div>
<kabel masukan: model="nilai" kabel: keydown.enter="$orangtua.tambahkan()">
</div>
 HTML;
 }
 }

8. Teleportasi

Livewire v3 juga akan menyertakan direktif @teleport Blade baru yang akan memungkinkan Anda untuk "menteleportasi" sepotong markup dan merendernya menjadi bagian lain dari DOM. Ini terkadang dapat membantu menghindari masalah z-index dengan modals dan slideout.

<div>
<kabel tombol: klik ="showModal">Tampilkan modal</button>
@teleportasi('#footer&apos;)
<kabel x-modal: model="showModal">
<!--... -->
</x-modal>
@endteleport
</div>

9. Komponen Malas

Di Livewire v3, cukup tambahkan atribut lazy saat merender komponen, dan itu tidak akan dirender pada awalnya. Saat masuk ke viewport, Livewire akan menjalankan permintaan untuk merendernya. Anda juga dapat menambahkan konten placeholder dengan menerapkan metode placeholder pada komponen Anda.

<div>
<kabel tombol: klik ="showModal">Tampilkan modal</button>
@teleportasi('#footer&apos;)
<kabel x-modal: model="showModal">
<livewire: contoh-komponen malas />
</x-modal>
@endteleport
</div>
<?php
ruang namaAplikasi\Http\Kawat listrik;
KelasKomponen Contohmemanjang \Kawat listrik\Komponen{
publikstatisfungsiplaceholder(){
kembali <<<'HTML'
<x-pemutar />
>>>
}
publik fungsi memberikan()/** [tl! runtuh: 7] */{
 kembali <<<'HTML'
<div>
 Todos: {{count($todos) }}
</div>
 HTML;
 }
}
?>

Kesederhanaan dan Kekuatan di Livewire V3

Kombinasi kesederhanaan dan kekuatan itulah yang membuatnya Laravel Livewire sangat mengagumkan dan mengapa ini digunakan oleh begitu banyak pengembang. Ini adalah alternatif yang bagus untuk kombinasi Laravel + Inersia + Vue. Secara khusus Laravel juga dibundel dengan kerangka kerja lain yang kuat dan dapat digunakan.