Laravel Livewire v3版本发布-侯体宗的博客

Laravel Livewire v3版本发布
Laravel / 管理员发布于 2年前 426

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网站和文档将获得一个全新的设计

laravel-livewire.com.png

总结

我们非常期待Livewire v3中的所有这些新功能。

如果你的业务依赖于Livewire，并且你想支持v3的开发，或希望得到支持你的Livewire应用的帮助，请考虑加入官方支持计划。

https://laravel-livewire.com/support

转：

https://laravel-news.com/livewire-v3-features

上一条：
编码的作用及常见的编码方式浅析
下一条：
在go语言中实现计算某年还剩多少周的时间示例

0条评论 (评论内容有缓存机制,请悉知!)