提前预览 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 人点赞

你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程，JWT 概念及使用和 API 开发相关的进阶知识。

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 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`