Apa yang Baru di Livewire v3 Laravel Framework?

Apa yang Baru di Livewire v3 Laravel Framework?

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 baru memiliki perbedaan yang lebih baik, fitur dapat dibangun lebih cepat, dan duplikasi antara Livewire dan Alpine lebih sedikit karena lebih mengandalkan Alpine dan menggunakan Morph, History, dan plugin lainnya. Beberapa fitur baru juga dimungkinkan dengan merestrukturisasi basis kode dan menempatkan penekanan yang lebih besar pada Alpine.





cara memasukkan kata sandi pada flash drive tanpa perangkat lunak
VIDEO MAKEUSEOF HARI INI

1. Suntikkan Skrip Livewire, Gaya, 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 butuhkan secara otomatis disuntikkan - termasuk Alpine!





<!DOCTYPE html> 
<html lang="en">
<head>
<script src="//unpkg.com/alpinejs" defer></script>
@livewireStyles @livewireScripts
</head>
<body>
...
</body>
</html>

2. Fungsi JavaScript di kelas PHP

Livewire v3 akan mendukung penulisan fungsi JavaScript secara 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 dieksekusi tanpa mengirim permintaan apa pun ke backend Anda.

<?php 
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @prop */
public $todos;
/** @js */
public function clear()
{
return <<<'JS'
this.todo = '';
JS;
}
}
?>
<div>
<input wire:model="todo" />
<button wire:click="clear">Clear</button>
</div>

3. Properti Terkunci

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



acara seperti family guy di netflix
<?php 
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}
?>

4. Kawat: model Ditangguhkan secara Default

Karena Livewire dan penggunaannya telah berevolusi, kami menyadari bahwa perilaku 'ditangguhkan' lebih masuk akal untuk 95% formulir, jadi fungsi 'ditangguhkan' v3 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.