提前预览 Livewire v3 新功能和修改

Laravel

上周三，Caleb Porzio 在 Laracon Online 上做了一个名为 “Livewire 的未来” 的演讲，演示了 Livewire v3 计划的所有新功能。在这篇文章中，我们将再次回顾这些特性，以防您错过了演讲或想再看一遍。

All new Alpine-based core#

整个 Livewire 核心已被重写。新的核心更多地依赖于 Alpine，在底层使用它的 Morph、History 和其他插件，这意味着 Livewire 有更好的差异，功能可以构建得更快，而且 Livewire 和 Alpine 之间的重复更少。重构代码库并更多地依赖于 Alpine 还可以添加一些新特性。

Livewire 脚本、样式和 Alpine 是自动注入的#

通过 composer 安装 Livewire v2 后，你必须手动添加’ @ livewistyles ‘， ‘ @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 将为 “x - 过渡” 提供一个包装，称为 “wire: 过渡”。添加 ‘ wire:transition ‘ 到任何元素，将显示或隐藏使用 Livewire，并获得那些真正漂亮的过渡。因为 ‘ wire:transition ‘ 在底层使用 ‘ x-transition ‘ ，所以所有的修饰符都像’。” 和 “不透明。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 中 “延迟” 功能将是默认的。这将减少发送到服务器的不必要请求，并提高性能。

当你需要输入上的 “live” 功能时，你可以使用‘wire:model.Live’来实现这种功能。

注意：这是极少的从 v2 到 v3 的破坏性更改之一。

批处理请求#

在 Livewire v2 中，如果你有多个组件使用 wire:poll 或调度和侦听事件，则这些组件中的每一个都将在每次轮询或事件时向服务器发送单独的请求。在 Livewire v3 中，对请求进行了智能批处理，因此可以在可能的情况下将 wire:poll、事件、侦听器和方法调用批处理为一个请求，从而节省更多请求并提高性能。

Reactive 属性#

在 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() ...

    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 指令，它将允许你 “teleport” 一段标记，并将其呈现为 DOM 的另一部分。这有时可以帮助避免模态和滑模的 z 索引问题。

<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 的感觉。如果你加上’。预取’修饰符以及，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 网站和文档将获得全新的设计！

Laravel

结论#

我们非常期待 Livewire v3 中的所有这些新功能。如果你的业务依赖 Livewire，并且你希望支持 v3 的开发，或者希望帮助支持你的 Livewire 应用程序，请考虑加入官方的支持计划。

Livewire

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://laravel-news.com/livewire-v3-fea...

译文地址：https://learnku.com/laravel/t/72075

本文为协同翻译文章，如您发现瑕疵请点击「改进」按钮提交优化建议改进本文

1 人点赞

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

提前预览 Livewire v3 新功能和修改

All new Alpine-based core#

Livewire 脚本、样式和 Alpine 是自动注入的#

没有构建步骤的热重新加载#

`wire:transition`#

在 PHP 类中编写 JavaScript 函数#

`/** @locked */` properties#

`wire:model` 在默认情况下被延迟#

批处理请求#

Reactive 属性#

`/** @modelable */` 属性#

使用‘ $parent ’访问父组件的数据和方法#

`@teleport`#

懒惰的组件#

`wire:navigate`#

`@persist`#

新的 laravel-livewire.com 设计#

结论#

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

提前预览 Livewire v3 新功能和修改

All new Alpine-based core#

Livewire 脚本、样式和 Alpine 是自动注入的#

没有构建步骤的热重新加载#

wire:transition#

在 PHP 类中编写 JavaScript 函数#

/** @locked */ properties#

wire:model 在默认情况下被延迟#

批处理请求#

Reactive 属性#

/** @modelable */ 属性#

使用‘ $parent ’访问父组件的数据和方法#

@teleport#

懒惰的组件#

wire:navigate#

@persist#

新的 laravel-livewire.com 设计#

结论#

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

`wire:transition`#

`/** @locked */` properties#

`wire:model` 在默认情况下被延迟#

`/** @modelable */` 属性#

`@teleport`#

`wire:navigate`#

`@persist`#