Các tính năng và thay đổi sắp tới trong Livewire v3
Hôm thứ Tư tuần trước tại sự kiện Laracon Online, Caleb Porzio đã có một buổi nói chuyện mang tên “Tương lai của Livewire“, giới thiệu tất cả các tính năng mới dự định cho Livewire v3. Trong bài viết này, chúng tôi sẽ đi qua những tính năng đó một lần nữa, trong trường hợp bạn đã bỏ lỡ buổi nói chuyện hoặc muốn xem lại lần thứ hai.
Laravel Livewire v3 release date
Caleb Porzio vừa thông báo rằng Laravel Livewire v3 sẽ chính thức được phát hành vào ngày 20 tháng 7 năm 2023, tại sự kiện Laracon US!
All new Alpine-based core
Toàn bộ core của Livewire đã được viết lại. Core mới dựa nhiều hơn vào Alpine, sử dụng các plugin như Morph, History và các plugin khác của Alpine dưới cơ, điều này có nghĩa là Livewire có khả năng so sánh 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à giảm bớt sự trùng lặp giữa Livewire và Alpine. Việc tái cấu trúc mã nguồn và phụ thuộc nhiều hơn vào Alpine cũng cho phép thêm một số tính năng mới.
Livewire scripts, styles, and Alpine are injected automatically
Sau khi cài đặt Livewire v2 bằng Composer, bạn phải thêm @livewireStyles
, @livewireScripts
, và Alpine vào giao diện mẫu của bạn theo cách thủ công. Với Livewire v3, bạn chỉ cần cài đặt Livewire và mọi thứ cần thiết sẽ được tự động chèn 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>
Hot reloading without a build step
Livewire v3 sẽ bao gồm khả năng nạp lại trực tiếp mà không cần bước xây dựng. Chỉ cần lưu một tệp trong trình soạn thảo của bạn và ngay lập tức bạn có thể thấy những thay đổi đó trong trình duyệt mà không làm hỏng trạng thái của các thành phần!
`wire:transition
`
Alpine đã có các hiệu ứng chuyển động trong một thời gian, nhưng Livewire v3 sẽ có một bao bọc xung quanh `x-transition` được gọi là
`wire:transition. Thêm
`wire:transition` vào bất kỳ phần tử nào sẽ được hiển thị hoặc ẩn bằng cách sử dụng Livewire và bạn sẽ nhận được những hiệu ứng chuyển động tuyệt đẹp đó. Vì `wire:transition` sử dụng `x-transition` dưới cơ, tất cả các bộ biến thể như `.opacity` và `.duration` cũng được hỗ trợ.
Viết functions JavaScript trong PHP classes của bạn
Livewire v3 sẽ hỗ trợ việc viết các hàm JavaScript trực tiếp trong các thành phần backend Livewire của bạn. Thêm một hàm vào thành phần của bạn, thêm một comment ` /** @js */ ` phía trên hàm đó, sau đó trả về một đoạn mã JavaScript bằng cú pháp HEREDOC của PHP và gọi nó từ phía frontend. Mã JavaScript sẽ được thực thi mà không cần gửi bất kỳ yêu cầu nào tới backend của bạn.
<?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>
`/** @locked */
` properties
Livewire v3 sẽ hỗ trợ các thuộc tính khóa – các thuộc tính không thể được cập nhật từ phía frontend. Thêm một comment `/** @locked */` phía trên một thuộc tính trong thành phần của bạn, và Livewire sẽ gửi một ngoại lệ nếu ai đó cố gắng cập nhật thuộc tính đó từ phía frontend.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}
`wire:model
` is deferred by default
Khi Livewire được phát hành lần đầu, nó chủ yếu được thiết kế cho việc viết các thành phần như tìm kiếm cần một cảm giác “thời gian thực”, do đó việc tự động gửi cập nhật đến máy chủ mỗi khi đầu vào được cập nhật là hợp lý. Bây giờ, chúng tôi sử dụng Livewire để xây dựng các ứng dụng đa dạng. Khi Livewire và cách sử dụng của nó phát triển, chúng tôi nhận ra rằng hành vi “hoãn lại” hợp lý hơn cho 95% biểu mẫu, vì vậy trong phiên bản v3, chức năng “hoãn lại” sẽ là mặc định. Điều này sẽ giảm số lượng yêu cầu không cần thiết tới máy chủ và cải thiện hiệu suất.
Khi bạn cần chức năng “thời gian thực” trên một đầu vào, bạn có thể sử dụng `wire:model.live` để kích hoạt chức năng đó.
Note: this is one of the very few breaking changes from v2 to v3.
Requests are batched
Trong Livewire v2, nếu bạn có nhiều thành phần sử dụng `wire:poll` hoặc gửi và lắng nghe sự kiện, mỗi thành phần đó sẽ gửi các yêu cầu riêng biệt tới máy chủ trên mỗi yêu cầu poll hoặc sự kiện. Trong Livewire v3, có sự tổ chức thông minh của các yêu cầu để `wire:polls`, sự kiện, người nghe và các cuộc gọi phương thức có thể được tổ chức thành một yêu cầu khi có thể, giúp tiết kiệm thêm yêu cầu và cải thiện hiệu suất.
Reactive properties
Khi sử dụng các thành phần lồng nhau trong Livewire v2, nếu một thuộc tính trên thành phần cha được cập nhật, dữ liệu của thành phần con không được tự động đồng bộ. Có cách giải quyết thủ công bằng cách sử dụng sự kiện và người nghe, nhưng nó không phải là lựa chọn lý tưởng. Trong Livewire v3, khi bạn truyền một phần dữ liệu cho một thành phần con, hãy thêm một comment `/** @prop */` phía trên thuộc tính trong thành phần con, sau đó cập nhật nó trong thành phần cha, nó sẽ được cập nhật trong thành phần con.
<?php
namespace App\Http\Livewire;
class TodosCount extends \Livewire\Component
{
/** @prop */
public $todos;
public function render()
{
return <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}
`/** @modelable */
` properties
Một vấn đề khác trong Livewire v2 là “mô hình hóa” một thuộc tính từ thành phần cha tới thành phần con. Giả sử bạn muốn có một thành phần <livewire:todo-input />. Không dễ dàng để truyền vào một giá trị và có nó tự động cập nhật trong thành phần cha mỗi khi nó được cập nhật trong thành phần con. Trong Livewire v3, bạn có thể thêm wire:model khi sử dụng thành phần đầu vào, sau đó trong thành phần đầu vào, thêm một comment /** @modelable */ phía trên thuộc tính lưu trữ giá trị cho thành phần và Livewire sẽ xử lý phần còn lại.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
public $todo = '';
public $todos = [];
public function add() ...
public function render()
{
return <<<'HTML'
<div>
<livewire:todo-input wire:model="todo" />
<ul>
@foreach ($todo as $todos)
<li>{{ $todo }}</li>
@endforeach
</ul>
</div>
HTML;
}
}
<?php
namespace App\Http\Livewire;
class TodoInput extends \Livewire\Component
{
/** @modelable */
public $value = '';
public function render()
{
return <<<'HTML'
<div>
<input wire:model="value">
</div>
HTML;
}
}
Access parent component’s data and methods using `$parent
`
Trong Livewire v3, sẽ có một cách mới để truy cập dữ liệu và phương thức của thành phần cha. Có một thuộc tính mới `$parent` có thể được truy cập để gọi các phương thức trên thành phần cha.
<?php
namespace App\Http\Livewire;
class TodoInput extends \Livewire\Component
{
/** @modelable */
public $value = '';
public function render()
{
return <<<'HTML'
<div>
<input
wire:model="value"
wire:keydown.enter="$parent.add()"
>
</div>
HTML;
}
}
`@teleport
`
Livewire v3 cũng sẽ bao gồm một chỉ thị Blade mới `@teleport` cho phép bạn “di chuyển” một đoạn mã đá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 đề z-index với modals và slideouts.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<!-- ... -->
</x-modal>
@endteleport
</div>
Livewire v3 sẽ giới thiệu các thành phần “lazy”. Nếu bạn có một thành phần mà việc tải lâu do một truy vấn phức tạp hoặc được hiển thị trong một slideout không luôn mở, bạn có thể muốn đợi để tải nó cho đến khi nó được hiển thị trên trang. Trong Livewire v3, chỉ cần thêm thuộc tính `lazy` khi hiển thị một thành phần và nó sẽ không được hiển thị ban đầu. Khi nó xuất hiện trong viewport, Livewire sẽ gửi yêu cầu để hiển thị nó. Bạn cũng có thể thêm nội dung giữ chỗ bằng cách thực hiện phương thức `placeholder` trên thành phần của bạn.
Lazy components
<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 App\Http\Livewire;
class ExampleComponent extends \Livewire\Component
{
public static function placeholder()
{
return <<<'HTML'
<x-spinner />
>>>
}
public function render() /** [tl! collapse:7] */
{
return <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}
`wire:navigate
`
Trong Livewire v3, bạn có thể thêm wire:navigate vào bất kỳ thẻ môi liên nào và khi được nhấp, Livewire sẽ tải trang ở nền, sau đó nhanh chóng thay đổi DOM, mang lại cho ứng dụng của bạn một cảm giác giống SPA hơn. Nếu bạn thêm .prefetch modifier, Livewire sẽ tiền tải nội dung của liên kết ngay khi con trỏ được di chuyển qua liên kết, tạo cảm giác nhanh hơn!
<a href="/example" wire:navigate.prefetch>Example Page</a>
`@persist
`
Một chỉ thị Blade thực sự tuyệt vời mà Livewire v3 sẽ bao gồm là `@persist`. Sử dụng `@persist` kết hợp với `wire:navigate`, bạn có thể tạo ra các phần của ứng dụng của bạn “bền vững” qua các thay đổi trang. Một ví dụ tốt về chức năng này là một trình phát podcast tiếp tục phát khi bạn di chuyển trong ứng dụng.
<!DOCTYPE html>
<html lang="en">
<body>
<x-podcast-header />
<x-podcast-body>
{{ $slot }}
</x-podcast-body>
@persist('player')
<x-podcast-player />
@endpersist
</body>
</html>
New laravel-livewire.com design
Cuối cùng nhưng không kém phần quan trọng, trang web và tài liệu Livewire sẽ có một thiết kế mới tươi mới!
Kết luận
Chúng tôi rất mong đợi những tính năng mới này trong Livewire v3. Nếu doanh nghiệp của bạn dựa vào Livewire và bạn muốn ủng hộ việc phát triển v3 hoặc cần sự trợ giúp để hỗ trợ ứng dụng Livewire của bạn, hãy xem xét tham gia Chương trình Hỗ trợ chính thức.