Có gì mới trong Livewire v3 Laravel Framework?
Laravel Livewire là một công cụ tuyệt vời để đạt được hành vi động trên một trang web mà không cần trực tiếp viết mã JavaScript. Nó làm cho việc xây dựng các giao diện động trở nên đơn giản mà không để lại sự thoải mái của Laravel. Gần đây, lõi Livewire đã được viết lại hoàn toàn.
Livewire v3 mới có sự khác biệt tốt hơn, các tính năng có thể được xây dựng nhanh hơn và ít trùng lặp hơn giữa Livewire và Alpine vì nó phụ thuộc nhiều hơn vào Alpine và sử dụng Morph, History và các plugin khác. Một số tính năng mới cũng được thực hiện bằng cách tái cấu trúc cơ sở mã và đặt trọng tâm nhiều hơn vào Alpine.
Mục Lục
1. Tự động tiêm Livewire Scripts, Styles và Alpine
Sau khi nhà soạn nhạc cài đặt Livewire v2, bạn phải thêm thủ công @livewireStyles, @livewireScripts và Alpine vào bố cục của mình. Với Livewire v3, bạn chỉ cần cài đặt Livewire và mọi thứ bạn cần sẽ được tự động đưa vào – bao gồm cả Alpine!
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//unpkg.com/alpinejs" defer></script>
@livewireStyles @livewireScripts
</head>
<body>
...
</body>
</html>2. Các hàm JavaScript trong các lớp PHP
Livewire v3 sẽ hỗ trợ viết các hàm JavaScript trực tiếp trong các thành phần Livewire phụ trợ của bạn. Thêm một hàm vào thành phần của bạn, thêm một / * _ @js _ / nhận xét phía trên hàm, sau đó trả về một số mã JavaScript bằng cú pháp HEREDOC của PHP và gọi nó từ giao diện người dùng của bạn. Mã JavaScript sẽ được thực thi mà không cần gửi bất kỳ yêu cầu nào đến chương trình phụ trợ của bạn.
<?php
namespace AppHttpLivewire;
class Todos extends LivewireComponent
{
public $todos;
public function clear()
{
return <<<'JS'
this.todo = '';
JS;
}
}
?>
<div>
<input wire:model="todo" />
<button wire:click="clear">Clear</button>
</div>3. Thuộc tính bị khóa
Livewire v3 sẽ hỗ trợ các thuộc tính bị khóa – các thuộc tính không thể cập nhật từ giao diện người dùng. Thêm / * * @locked / nhận xét phía trên thuộc tính trên thành phần của bạn và Livewire sẽ đưa ra một ngoại lệ nếu ai đó cố gắng cập nhật thuộc tính đó từ giao diện người dùng.
<?php
namespace AppHttpLivewire;
class Todos extends LivewireComponent
{
public $todos = [];
}
?>4. Dây: mô hình được hoãn lại theo mặc định
Khi Livewire và cách sử dụng nó đã phát triển, chúng tôi nhận thấy rằng hành vi “hoãn lại” có ý nghĩa hơn đối với 95% biểu mẫu, vì vậy trong v3, chức năng “hoãn” sẽ là mặc định. Điều này sẽ tiết kiệm các yêu cầu không cần thiết đến máy chủ của bạn và cải thiện hiệu suất. Khi bạn cần chức năng “trực tiếp” trên đầu vào, bạn có thể sử dụng wire: model.live để bật chức năng đó.
Đây là một trong số rất ít thay đổi đột phá từ v2 sang v3.
5. Yêu cầu được theo lô
Trong Livewire v2, nếu bạn có nhiều thành phần sử dụng wire: thăm dò hoặc cử và lắng nghe các sự kiện, thì mỗi thành phần đó sẽ gửi các yêu cầu riêng biệt đến máy chủ trên mỗi cuộc thăm dò hoặc sự kiện. Trong Livewire v3, có một loạt các yêu cầu thông minh để các dây: thăm dò ý kiến, sự kiện, người nghe và lệnh gọi phương thức có thể được gộp thành một yêu cầu khi có thể, tiết kiệm nhiều yêu cầu hơn và cải thiện hiệu suất.
6. Thuộc tính phản ứng
Trong Livewire v3, khi bạn chuyển một phần dữ liệu vào một thành phần con, hãy thêm / * _ @prop _ / nhận xét ở trên thuộc tính trong phần tử con, sau đó cập nhật nó trong thành phần mẹ, nó sẽ được cập nhật trong thành phần con.
<?php
namespace AppHttpLivewire;
class TodosCount extends LivewireComponent{
public $todos;
public function render(){
return <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}7. Truy cập dữ liệu và phương pháp của thành phần gốc bằng cách sử dụng $ parent
Trong Livewire v3, sẽ có một cách mới để truy cập vào dữ liệu và phương thức của thành phần mẹ. Có một thuộc tính $ cha mẹ mới có thể được truy cập để gọi các phương thức trên cha mẹ.
<?php
namespace AppHttpLivewire;
class TodoInput extends LivewireComponent{
public $value = '';
public function render(){
return <<<'HTML'
<div>
<input wire:model="value" wire:keydown.enter="$parent.add()">
</div>
HTML;
}
}8. Dịch chuyển
Livewire v3 cũng sẽ bao gồm chỉ thị @teleport Blade mới cho phép bạn “dịch chuyển” một phần đánh dấu và hiển thị nó một phần khác của DOM. Điều này đôi khi có thể giúp tránh các vấn đề về chỉ mục z với các phương thức và slideouts.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<!-- ... -->
</x-modal>
@endteleport
</div>9. Thành phần lười biếng
Trong Livewire v3, chỉ cần thêm thuộc tính lười biếng khi hiển thị một thành phần và nó sẽ không được hiển thị ban đầu. Khi nó đi vào khung nhìn, Livewire sẽ đưa ra yêu cầu hiển thị nó. Bạn cũng sẽ có thể thêm nội dung trình giữ chỗ bằng cách triển khai phương pháp trình giữ chỗ trên thành phần của mình.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<livewire:example-component lazy />
</x-modal>
@endteleport
</div>
<?php
namespace AppHttpLivewire;
Class ExampleComponent extends LivewireComponent{
public static function placeholder(){
return <<<'HTML'
<x-spinner />
>>>
}
public function render() {
return <<<'HTML'
<div>
Todos: {{count($todos) }}
</div>
HTML;
}
}
?>Sự đơn giản và sức mạnh trong Livewire V3
Sự kết hợp giữa tính đơn giản và sức mạnh là điều khiến Laravel Livewire trở nên tuyệt vời và tại sao nó lại được nhiều nhà phát triển sử dụng. Nó đặc biệt là một sự thay thế tốt cho sự kết hợp Laravel + Inertia + Vue. Đặc biệt, Laravel cũng được tích hợp với các khung công tác khác mạnh mẽ và có thể làm việc được.