Laravel 用 Livewire 写全栈组件：服务端渲染加增量更新，少写前端胶水

Livewire 解决什么问题

想做一个带交互的页面，传统做法是前端写组件、后端写 API、再 glue 一遍。Livewire 让你只写一个 PHP 类加一段 Blade，交互由服务端渲染、前端只做增量更新，省掉大量胶水代码。

安装与创建组件

composer require livewire/livewire
php artisan make:livewire Counter

// app/Livewire/Counter.php
namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public int $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view("livewire.counter");
    }
}

Blade 模板

<!-- resources/views/livewire/counter.blade.php -->
<div>
    <p>当前计数：{{ $count }}</p>
    <button wire:click="increment">+1</button>
</div>

带表单与校验

Livewire 的表单绑定和校验开箱即用，wire:model 双向绑定，rules 写在组件里。

// app/Livewire/ContactForm.php
namespace App\Livewire;

use Livewire\Component;
use App\Models\Message;

class ContactForm extends Component
{
    public string $name = "";
    public string $body = "";

    protected function rules()
    {
        return [
            "name" => "required|min:2",
            "body" => "required|min:10",
        ];
    }

    public function submit()
    {
        $this->validate();
        Message::create($this->only(["name", "body"]));
        $this->reset();
        session()->flash("ok", "已收到");
    }

    public function render()
    {
        return view("livewire.contact-form");
    }
}

<!-- resources/views/livewire/contact-form.blade.php -->
<form wire:submit="submit">
    <input type="text" wire:model="name" />
    @error("name") <span>{{ $message }}</span> @enderror
    <textarea wire:model="body"></textarea>
    @error("body") <span>{{ $message }}</span> @enderror
    <button type="submit">提交</button>
</form>

工程注意点

• Livewire 每次交互都往返服务端，纯前端的高频动画还是用 Alpine.js 或 Vue 更合适。
• wire:model 默认防抖，加 .live 或 .debounce 控制时机，避免每次按键都请求。
• 大列表用分页或 wire:poll 轮询，别一次性把上万条塞进组件属性。
• 生产环境记得开 Livewire 的编译资产，避免开发期的运行时解析开销。