Laravel Livewire v3版本发布
Laravel / 管理员 发布于 2个月前 80
Laravel Livewire v3发布日期，Caleb Porzio刚刚宣布，Laravel Livewire v3将于7月20日在Laracon US正式发布!
全新的基于Alpine的核心
整个Livewire的核心已经被重写。
新的核心更依赖于Alpine，使用它的Morph，History和其他插件，这意味着Livewire有更好的差异化，功能可以更快地建立，而且Livewire和Alpine之间的重复较少。
重组代码库和更多地依赖Alpine也使得一些新功能得以加入。
自动注入Livewire脚本、样式和Alpine
在作曲家安装Livewire v2之后，你必须手动将@livewireStyles、@livewireScripts和Alpine添加到你的布局中。
有了Livewire v3，你只需安装Livewire，你所需要的一切都会自动注入--包括Alpine!
<!DOCTYPE html>
<html>
<head>
<script src="//unpkg.com/alpinejs" defer></script>
@livewireStyles
@livewireScripts
</head>
<body>
...
</body>
</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代码将被执行，而不会向你的后端发送任何请求。
<?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将支持锁定属性--不能从前端更新的属性。
在你的组件上的属性上方添加一个/** @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 来启用该功能。
Note: this is one of the very few breaking changes from v2 to 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 */ properties
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() ...
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中，只要在渲染组件时添加一个懒惰属性，它就不会在最初被渲染。
当它进入视口时，Livewire会发出请求来渲染它。
你还可以通过在你的组件上实现占位符方法来添加占位符内容。
<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>
<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应用的帮助，请考虑加入官方支持计划。
https://laravel-livewire.com/support转：
https://laravel-news.com/livewire-v3-features上一条：
编码的作用及常见的编码方式浅析
下一条：
在go语言中实现计算某年还剩多少周的时间示例
- 相关文章
- Laravel 10.24版本发布(0个评论)
- Laravel应用程序性能监控 (APM) 工具：Scout (0个评论)
- laravel框架中以公共函数方式实现job异步化执行封装代码示例(0个评论)
- Laravel HTTP 测试与Symfony的DomCrawler(0个评论)
- 使用 Laravel Rest Api 轻松生成 Apis(0个评论)
- 近期文章
- Laravel 10.24版本发布(0个评论)
- go语言多项目批量更新依赖及自动调用jenkins构建流程步骤(0个评论)
- 在go语言中实现数学pow（x^y 的幂次）代码示例(0个评论)
- Laravel应用程序性能监控 (APM) 工具：Scout (0个评论)
- 推荐一款针对git、diff和grep输出的语法高亮显示的扩展包：Git Delta(0个评论)
- laravel框架中以公共函数方式实现job异步化执行封装代码示例(0个评论)
- 在go语言中实现从http响应中解码JSON数据(0个评论)
- go语言中如何使用JSON网络令牌（JWT）在控制器之间传递数据(0个评论)
- 计算机网络知识详解(0个评论)
- Laravel HTTP 测试与Symfony的DomCrawler(0个评论)
- 近期评论
-
路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细，如果加个前端chatgpt对话页面就完美了.. -
博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试，免费ssr是没那么稳.. -
mashrdn 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了，youtobe无法打开网页，是怎么回事.. -
张伟 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 3q！有用，不过免费节点隔天就要去git上复制新的导进去.. -
博主 在
科学上网翻墙访问Google , 上外网神器佛跳墙VPN(永久免费)使用流程步骤中评论 该篇教程已不能用了，告知大家，免的老有老铁问我！..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号
