Livewire 是 Laravel 生态系统中最重要的项目之一，专门针对前端开发。 Livewire v3 最近发布了，让我们来探讨一下 Livewire 是什么，以及什么样的项目适合其架构。

Livewire 的独特之处在于它允许开发“现代”Web 应用程序，而无需使用专用的 JavaScript 框架。

使用 Livewire，可以开发提供与 Vue 或 React 相同水平的反应性的 Blade 组件，而无需通过解耦的前端和后端来管理项目的复杂性。 您可以在 Laravel 和 Blade 模板的范围内继续开发您的应用程序。

Livewire 的工作原理

Livewire 是一个 Composer 包，您可以将其添加到 Laravel 项目中。然后必须使用适当的 Blade 指令在每个 HTML 页面（或该页面，如果您想要创建单页面应用程序）上激活它。 Livewire 组件由 PHP 类和 Blade 文件组成，其中包含特定前端组件如何工作以及必须呈现的逻辑。

当浏览器要求访问使用 Livewire 的页面时，会发生以下情况：

• 页面以组件的初始状态呈现，就像使用 Blade 创建的任何页面一样；
• 当组件 UI 触发交互时，将对适当的路由进行 AJAX 调用，指示 Livewire 组件和发生的交互，以及组件的状态；
• 数据在组件的 PHP 部分进行处理，该部分执行交互结果的新渲染并将其发送回浏览器；
• 页面的 DOM 根据从服务器收到的更改而更改。

这与 Vue 和 React 的做法非常相似，但在这种情况下，响应交互的反应性逻辑由后端管理，而不是在 javascript 端管理。

为了帮助您更好地理解逻辑，我将在下面向您展示这个比较的示例。

如果您想了解更多有关构建开发人员驱动型公司所面临的挑战，您可以在 Linkedin 或 X 上关注我。

如何安装 Laravel Livewire

Livewire 安装绝对是最少的。在 Laravel 项目中安装 Composer 包，并将必要的 Blade 指令添加到所有页面（或项目中所有 Blade 模板所衍生的通用布局）。

composer require livewire/livewire

    ...

    @livewireStyles


    ...

    @livewireScripts

如何创建 Laravel Livewire 组件

安装 Composer 软件包后，可以使用新的 Artisan make 子命令来创建新的 Livewire 组件。每个组件都将由一个 PHP 类和一个 Blade 视图组成。

它类似于Blade的基于类的组件。

php artisan make:livewire SpyInput    
COMPONENT CREATED ?

CLASS: app/Http/Livewire/SpyInput.php
VIEW: resources/views/livewire/spy-input.blade.php

此示例中的组件将“监视”HTML 输入字段中写入的内容，而无需编写 JavaScript 代码。

然后我们向组件类插入一个公共属性：

// app/Http/Livewire/SpyInput.php

namespace App\Livewire;

use Livewire\Component;

class SpyInput extends Component
{
    public string $message;

    public function render()
    {
        return view('livewire.spy-input');
    }
}

组件视图实现如下：

// resources/views/livewire/spy-input.blade.php


    Type here:
    
    You typed: {{ $message }}

最后将 Livewire 组件放入刀片视图中：

    @livewireStyles



    

    @livewireScripts

在普通的 Blade 组件中，组件类的所有公共属性在 Blade 模板中都是可见的。因此在 {{ $message }} 中，$message 属性的值将自动显示。然而，在普通的基于类的组件中，这只发生在第一个组件渲染时。如果您在输入字段中输入内容，span 标记中不会发生任何变化。

然而，在Livewire 组件中，我们在字段中使用了wire:model="message" 属性。该属性确保输入字段的值链接到 PHP 类中的 $message 属性。当您在输入字段中写入新值时，它将发送到服务器，服务器更新 $message 的值并执行新的渲染，将其发送回前端，然后更新 {{ $消息 }}.

通过打开浏览器开发工具的“网络”选项卡，我们会注意到键盘上的每个按键都会按以下路线调用服务器：

/livewire/message/

对每个调用的响应包含组件的新渲染 HTML，Livewire 会将其插入到页面中以代替旧的 HTML。可以使用各种自定义导线属性。例如，您可以在单击按钮时执行组件类的公共方法。以下是此出价的示例：

Click Here

class SpyInput extends Component
{
    public function doSomething()
    {
        // Your code here…
    }
}

其中doSomething是Livewire组件的PHP类的公共方法。

与其他 Laravel 功能集成

连接到组件的 PHP 类的行为与 Laravel 项目中的任何其他 PHP 类类似。唯一的区别是它使用 mount 方法而不是经典的 __construct 类构造函数来初始化类的公共属性。

{{-- Initial assignment of the the $book property in the ShowBook class --}}


class ShowBook extends Component
{
    public $title;
    public $excerpt;

    // "mount" instead of "__constuct"
    public function mount(Book $book = null)
    {
        $this->title = $book->title;
        $this->excerpt = $book->excerpt;
    }
}

您还可以使用受保护的属性$rules来配置前端发送到后端的数据的验证限制。您必须调用 validate() 方法来验证数据：

class BookForm extends Component
{
    public $title;
    public $excerpt;
    public $isbn;

    protected $rules = [
        'title' => ['required', 'max:200'],
        'isbn' => ['required', 'unique:books', 'size:17'],
        'excerpt' => 'max:500'
    ];

    public function saveBook()
    {
        $validated = $this->validate($this->rules);

        Book::create($validated);

        return redirect()->to('/books);
    }
}

或者您可以使用 PHP 属性来声明类属性所需的验证规则：

class BookForm extends Component
{
    #[Validate('required|max:200')]
    public $title;

    #[Validate('required|unique:books|size:17')]
    public $isbn;

    #[Validate('max:500')]
    public $excerpt;

    public function saveBook()
    {
        $this->validate();

        Book::create([
            'title' => $this->title,
            'isbn' => $this->isbn,
            'excerpt' => $this->excerpt,
        ]);

        return redirect()->to('/books);
    }
}

一般来说，每个 Livewire 组件的行为方式与 Laravel 开发人员期望 Laravel 项目中的 PHP 类的行为方式相同。因此允许创建反应式 Web 界面，而无需分离 Laravel 和 Vue/React 之间的开发项目。

免费监控您的 Laravel 应用程序

Inspector是专门为软件开发人员设计的代码执行监控工具。您不需要在服务器级别安装任何东西，只需安装 Laravel 包 就可以开始了。

如果您正在寻找 HTTP 监控、数据库查询见解以及将警报和通知转发到您首选消息传递环境的功能，请免费尝试 Inspector。注册您的帐户。

或者在网站上了解更多信息：https://inspector.dev