上周三在 Laracon Online 上，Caleb Porzio 做了一个名为 "Livewire 的未来" 的演讲，演示了 Livewire v3 中计划的所有新功能。在本文中，我们将再次介绍这些功能，以防您错过了演讲或想再看一遍。
Laravel Livewire v3 发布日期
Caleb Porzio 刚刚宣布，Laravel Livewire v3 将于 7 月 20 日在 Laracon US 正式发布！
全新的基于 Alpine 的核心
整个 Livewire 核心已经重写。新的核心更多地依赖于 Alpine，在幕后使用其 Morph、History 和其他插件，这意味着 Livewire 具有更好的差异化，功能可以更快地构建，并且 Livewire 和 Alpine 之间有更少的重复。重构代码库并更多地依赖于 Alpine 也使添加了几项新功能成为可能。
Livewire 脚本、样式和 Alpine 会自动注入
在使用 Composer 安装 Livewire v2 之后，您必须手动将 @livewireStyles、@livewireScripts 和 Alpine 添加到您的布局中。在 Livewire v3 中，您只需安装 Livewire，您需要的一切都会自动注入 - 包括 Alpine！
<!DOCTYPE html> <html lang="en"> <head>- <script src="//unpkg.com/alpinejs" defer></script> - @livewireStyles- @livewireScripts </head> <body> ... </body> </html>无需构建步骤的热重载
Livewire v3 将包含无需构建步骤的热重载。只需在您的编辑器中保存一个文件，就可以立即在您的浏览器中看到这些更改，而不会破坏您的组件的状态！
wire:transition
Alpine 一直都有过渡动画，但 Livewire v3 将有一个名为 wire:transition 的 x-transition 包装器。将 wire:transition 添加到任何将使用 Livewire 显示或隐藏的元素，并获得那些非常不错的过渡动画。由于 wire:transition 在后台利用了 x-transition，因此所有修饰符（如 .opacity 和 .duration）也将受到支持。
在您的 PHP 类中编写 JavaScript 函数
Livewire v3 将支持直接在您的后端 Livewire 组件中编写 JavaScript 函数。在您的组件中添加一个函数，在该函数上方添加一个 /** @js */ 注释，然后使用 PHP 的 HEREDOC 语法返回一些 JavaScript 代码，并从您的前端调用它。JavaScript 代码将在没有向您的后端发送任何请求的情况下执行。
<?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 */ 属性
Livewire v3 将支持锁定属性 - 不能从前端更新的属性。在您的组件上的属性上方添加一个 /** @locked / 注释，如果有人尝试从前端更新该属性，Livewire 将抛出一个异常。
<?php namespace App\Http\Livewire; class Todos extends \Livewire\Component{ /** @locked */ public $todos = [];}wire:model 默认情况下是延迟的
当 Livewire 首次发布时，它主要用于编写类似搜索的组件，这些组件需要非常“实时”的感觉，因此每次输入更新时自动向服务器发送更新是有意义的。现在，我们正在使用 Livewire 来构建各种类型的应用程序。随着 Livewire 及其使用的演变，我们已经意识到，“延迟”行为对于 95% 的表单更有意义，因此在 v3 中，“延迟”功能将成为默认设置。这将节省不必要的请求发送到您的服务器并提高性能。
当您需要在输入上使用“实时”功能时，可以使用 wire:model.live 来启用该功能。
注意：这是从 v2 到 v3 的少数几个重大变更之一。
请求被批处理
在 Livewire v2 中，如果您有多个组件使用 wire:poll 或调度和侦听事件，则这些组件中的每一个都会在每次轮询或事件时向服务器发送单独的请求。在 Livewire v3 中，存在对请求的智能批处理，以便 wire:poll、事件、侦听器和方法调用尽可能地批处理到一个请求中，从而节省更多请求并提高性能。
响应式属性
在 Livewire v2 中使用嵌套组件时，如果父组件上的属性被更新，子组件的数据不会自动保持同步。可以使用事件和侦听器进行手动解决方法，但这并非理想选择。在 Livewire v3 中，当您将一段数据传递给子组件时，在子组件中的属性上方添加一个 /** @prop */ 注释，然后在父组件中更新它，它将在子组件中更新。
<?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 */ 属性
Livewire v2 中的另一个痛点是将属性从父组件“建模”到子组件。假设您想要一个 <livewire:todo-input /> 组件。将值传递进去，然后在子组件中更新它时自动在父组件中更新并不容易。在 Livewire v3 中，您可以在使用输入组件时添加 wire:model，然后在输入组件内部在您存储组件值的属性上方添加一个 /** @modelable */ 注释，Livewire 将处理其余工作。
<?php namespace App\Http\Livewire; class Todos extends \Livewire\Component{ public $todo = ''; public $todos = []; public function add()
{ $this->todos[] = $this->todo; $this->todo = ''; } 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; }}使用 $parent 访问父组件的数据和方法
在 Livewire v3 中，将有一种新的方法来访问父组件的数据和方法。有一个新的 $parent 属性可以访问，用于在父组件上调用方法。
<?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 还将包含一个新的 @teleport Blade 指令，它允许您“传送”一段标记并在 DOM 的另一个部分渲染它。这有时可以帮助避免模态框和侧边栏的 z-index 问题。
<div> <button wire:click="showModal">Show modal</button> @teleport('#footer') <x-modal wire:model="showModal"> <!-- ... --> </x-modal> @endteleport</div>延迟组件
Livewire v3 将引入“延迟”组件。如果您有一个由于某些昂贵的查询而加载时间很长或渲染在并非总是打开的侧边栏中的组件，您可能希望等到它显示在页面上再加载它。在 Livewire v3 中，只需在渲染组件时添加一个 lazy 属性，它就不会被最初渲染。当它进入视口时，Livewire 将发出一个请求来渲染它。您还可以通过在组件上实现 placeholder 方法来添加占位符内容。
<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
在 Livewire v3 中，你可以将 `wire:navigate` 添加到任何锚点标签，当点击时，Livewire 将在后台获取页面，然后非常快速地替换 DOM，使你的应用程序更像 SPA。如果你也添加了 `.prefetch` 修饰符，Livewire 将在悬停链接时预取链接的内容，使其感觉更快！
<a href="/example" wire:navigate.prefetch>Example Page</a>@persist
Livewire v3 将包含另一个非常酷的 Blade 指令 `@persist`。将 `@persist` 与 `wire:navigate` 结合使用，可以让你拥有跨页面更改而“持久化”的应用程序部分。一个很好的例子是播客播放器，它在你在应用程序中移动时继续播放。
<!DOCTYPE html><html lang="en"><body> <x-podcast-header /> <x-podcast-body> {{ $slot }} </x-podcast-body> @persist('player') <x-podcast-player /> @endpersist</body></html>新的 laravel-livewire.com 设计
最后但并非最不重要的是，Livewire 网站和文档将获得全新的设计！
结论
我们真的很期待 Livewire v3 中的所有这些新功能。如果你的业务依赖于 Livewire，并且你想支持 v3 的开发，或者想获得帮助来支持你的 Livewire 应用程序，请考虑加入官方的 支持计划。
TALL 技术栈（Tailwind CSS、Alpine.js、Laravel 和 Livewire）顾问，以及 designtotailwind.com 的所有者。
