上周三在Laracon Online上，Caleb Porzio做了一个名为"Livewire的未来"的演讲，演示了Livewire v3计划的所有新功能。 在这篇文章中，我们将再次回顾这些功能，以防你错过演讲或想再看一下。
基于Alpine的全新内核
整个Livewire核心已被重写。新的核心更多地依赖Alpine，使用它的Morph、History和其他插件，这意味着Livewire有更好的差异化，可以更快地构建功能，而且Livewire和Alpine之间的重复较少。重组代码库和更多地依赖Alpine也使得一些新功能得以加入。
自动注入Livewire脚本、样式和Alpine
在作曲家安装Livewire v2之后，你必须手动将@livewireStyles 、@livewireScripts 、和Alpine添加到你的布局中。有了Livewire v3，你只需安装Livewire，你所需要的一切都会自动注入--包括Alpine!
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <script src="//unpkg.com/alpinejs" defer></script> 5 @livewireStyles 6 @livewireScripts 7</head> 8<body> 9 ...10</body>11</html>
无需构建步骤的热重载
Livewire v3将包括无需构建步骤的热重载。只要在你的编辑器中保存一个文件，就可以在你的浏览器中立即看到这些变化，而不会破坏你的组件的状态!
wire:transition
Alpine拥有过渡功能已经有一段时间了，但Livewire v3将有一个围绕x-transition 的封装器，称为wire:transition 。将wire:transition 添加到任何将使用Livewire显示或隐藏的元素，并获得那些非常好的过渡。由于wire:transition 在引擎盖下利用了x-transition ，所有的修改器如.opacity 和.duration 也将被支持。
在你的PHP类中编写JavaScript函数
Livewire v3将支持在你的后台Livewire组件中直接编写JavaScript函数。在你的组件中添加一个函数，在函数上方添加一个/** @js */ 注释，然后使用PHP的HEREDOC语法返回一些JavaScript代码并从你的前端调用它。该JavaScript代码将被执行，而无需向你的后端发送任何请求。
1<?php 2 3namespace App\Http\Livewire; 4 5class Todos extends \Livewire\Component 6{ 7 /** @prop */ 8 public $todos; 9 10 /** @js */11 public function clear()12 {13 return <<<'JS'14 this.todo = '';15 JS;16 }17}
1<div>2 <input wire:model="todo" />3 4 <button wire:click="clear">Clear</button> 5</div>
/** @locked */ 属性
Livewire v3将支持锁定属性--不能从前端更新的属性。在你的组件上的属性上方添加一个/** @locked / 注释，如果有人试图从前端更新该属性，Livewire将抛出一个异常。
1<?php2 3namespace App\Http\Livewire;4 5class Todos extends \Livewire\Component6{7 /** @locked */8 public $todos = [];9}
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 */ ，然后在父组件中更新它，它将在子组件中更新。
1<?php 2 3namespace App\Http\Livewire; 4 5class TodosCount extends \Livewire\Component 6{ 7 /** @prop */ 8 public $todos; 9 10 public function render()11 {12 return <<<'HTML'13 <div>14 Todos: {{ count($todos) }}15 </div>16 HTML;17 }18}
/** @modelable */ 属性
Livewire v2的另一个痛点是将一个属性从父组件 "建模 "到子组件。假设你想要一个<livewire:todo-input /> 组件。要传入一个值，然后让它在子组件中更新时自动在父组件中更新，这并不容易。在Livewire v3中，你可以在使用输入组件时添加wire:model ，然后在输入组件中，在你为该组件存储值的属性上方添加一个/** @modelable */ 注释，Livewire将处理其余部分。
1<?php 2 3namespace App\Http\Livewire; 4 5class Todos extends \Livewire\Component 6{ 7 public $todo = ''; 8 9 public $todos = [];10 11 public function add() ...12 {13 $this->todos[] = $this->todo;14 $this->todo = '';15 }16 17 public function render()18 {19 return <<<'HTML'20 <div>21 <livewire:todo-input wire:model="todo" /> 22 <ul>23 @foreach ($todo as $todos)24 <li>{{ $todo }}</li>25 @endforeach26 </ul>27 </div>28 HTML;29 }30}
1<?php 2 3namespace App\Http\Livewire; 4 5class TodoInput extends \Livewire\Component 6{ 7 /** @modelable */ 8 public $value = ''; 9 10 public function render()11 {12 return <<<'HTML'13 <div>14 <input wire:model="value">15 </div>16 HTML;17 }18}
访问父组件的数据和方法，使用$parent
在Livewire v3中，将有一种新的方式来访问父组件的数据和方法。有一个新的$parent 属性，可以被访问以调用父组件上的方法。
1<?php 2 3namespace App\Http\Livewire; 4 5class TodoInput extends \Livewire\Component 6{ 7 /** @modelable */ 8 public $value = ''; 9 10 public function render()11 {12 return <<<'HTML'13 <div>14 <input15 wire:model="value"16 wire:keydown.enter="$parent.add()"17 >18 </div>19 HTML;20 }21}
@teleport
Livewire v3还将包括一个新的@teleport Blade指令，允许你 "传送 "一块标记并渲染DOM的另一部分。这有时可以帮助避免模态和滑出的z-index问题。
1<div>2 <button wire:click="showModal">Show modal</button>3 4 @teleport('#footer')5 <x-modal wire:model="showModal">6 <!-- ... -->7 </x-modal>8 @endteleport9</div>
懒惰组件
Livewire v3将引入 "懒惰 "组件。如果你有一个组件由于一些昂贵的查询而需要花费一些时间来加载，或者在一个不总是打开的幻灯片中呈现，你可能想等待加载它，直到它在页面上显示。在Livewire v3中，只要在渲染组件时添加一个lazy 属性，它就不会在最初被渲染。当它进入视口时，Livewire会发出请求来渲染它。你还可以通过在你的组件上实现placeholder 方法来添加占位符内容。
1<div>2 <button wire:click="showModal">Show modal</button>3 4 @teleport('#footer')5 <x-modal wire:model="showModal">6 <livewire:example-component lazy /> 7 </x-modal>8 @endteleport9</div>
1<?php 2 3namespace App\Http\Livewire; 4 5class ExampleComponent extends \Livewire\Component 6{ 7 public static function placeholder() 8 { 9 return <<<'HTML'10 <x-spinner />11 >>>12 }13 14 public function render() /** [tl! collapse:7] */15 {16 return <<<'HTML'17 <div>18 Todos: {{ count($todos) }}19 </div>20 HTML;21 }22}
wire:navigate
在Livewire v3中，你可以将wire:navigate 添加到任何锚点标签中，当点击时，Livewire将在后台获取页面，然后快速交换DOM，使你的应用程序具有更多SPA的感觉。如果你也添加了.prefetch 修改器，Livewire将在链接被悬停时预取链接的内容，使其感觉更快。
1<a href="/example" wire:navigate.prefetch>Example Page</a>
@persist
Livewire v3将包括的另一个非常酷的Blade指令是@persist 。将@persist 与wire:navigate 结合使用，将使你的应用程序的某些部分能够在页面变化时 "持续存在"。这种功能的一个很好的例子是，当你在应用程序中移动时，播客播放器会继续播放。
1<!DOCTYPE html> 2<html lang="en"> 3<body> 4 <x-podcast-header /> 5 6 <x-podcast-body> 7 {{ $slot }} 8 </x-podcast-body> 9 10 @persist('player')11 <x-podcast-player />12 @endpersist13</body>14</html>
新的laravel-livewire.com设计
最后但并非最不重要的是，Livewire网站和文档有了一个全新的设计。
总结
如果你的业务依赖于Livewire，并且你想支持V3的开发，或者想得到支持你的Livewire应用的帮助，请考虑加入官方支持计划。
存档在。
TALL stack (Tailwind CSS, Alpine.js, Laravel, and Livewire)的顾问和roasted.dev的所有者。
