Back

Laravel Livewire 入门指南

OpenReplay Team OpenReplay Team

Mar 17, 2026 · 2 min read

Laravel Livewire 入门指南

如果你曾经想在 Laravel 应用中构建响应式、动态的界面,但又不想使用 Vue、React 或编写大量自定义 JavaScript,Laravel Livewire 值得你关注。它让你完全使用 PHP 和 Blade 编写有状态的 UI 组件,而 Livewire 会自动处理浏览器端的更新。

本指南介绍 Livewire 的工作原理、如何构建你的第一个组件,以及 Livewire 4 中的现代开发体验。

核心要点

  • Livewire 让你仅使用 PHP 和 Blade 在 Laravel 中构建响应式、动态的 UI —— 无需单独的 JavaScript 框架。
  • 单文件组件将 PHP 逻辑和 Blade 模板保存在一个文件中,简化了开发流程。
  • Livewire 通过轻量级 AJAX 请求和智能 DOM 补丁自动处理服务器与浏览器之间的状态同步。
  • Alpine.js 与 Livewire 捆绑发布,用于处理客户端交互,而 Livewire 处理需要服务器端逻辑的任何操作。

什么是 Laravel Livewire?

Livewire 是 Laravel 的全栈框架,它让构建动态 UI 的体验就像编写常规 PHP 代码一样。你定义一个带有公共属性和方法的组件类,将其与 Blade 模板配对,Livewire 会在幕后使用轻量级 AJAX 请求来处理服务器和浏览器之间的状态同步。

无需 WebSockets。无需单独的 API。无需配置 JavaScript 框架。

它自然地融入 Laravel 的生态系统,特别适合以下场景:

  • 带有实时验证的表单处理
  • 带有实时数据的仪表板
  • 交互式组件,如搜索过滤器、模态框和多步骤流程

现代 Livewire 应用还可以与最新的基于 Livewire 工作流构建的 Laravel 起步套件无缝集成,因此你可以通过最少的设置获得生产就绪的脚手架。

Livewire 响应式组件的工作原理

当用户与 Livewire 组件交互时 —— 点击按钮、在字段中输入 —— Livewire 会向服务器发送一个包含当前组件状态的请求。服务器处理该操作,更新状态,并返回新的渲染结果。然后 Livewire 智能地仅修补 DOM 中发生变化的部分。

从开发者的角度来看,你只是在编写 PHP 方法和读取公共属性。响应式行为会自动发生。

构建你的第一个 Livewire 单文件组件

现代 Livewire 应用通常使用单文件组件,其中 PHP 类和 Blade 模板位于一个 .blade.php 文件中。这使相关逻辑保持在一起,是现代 Livewire 中的常见模式。

这里有一个简单的计数器来说明核心概念:

<?php

use Livewire\Component;

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

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

    public function decrement(): void
    {
        $this->count--;
    }
};

?>

<div>
    <button wire:click="decrement">-</button>
    <span>{{ $count }}</span>
    <button wire:click="increment">+</button>
</div>

这里发生了什么:

  • public int $count 是组件的响应式状态
  • increment() 和 decrement() 是从浏览器触发的服务器端方法
  • wire:click 告诉 Livewire 在点击按钮时调用哪个方法
  • {{ $count }} 显示在每次交互后自动更新 —— 无需页面刷新

注意: 每个 Livewire 组件必须有一个单一的根 HTML 元素。多个根元素会导致错误。

对于更实际的示例,文章创建表单会使用 wire:model 进行双向数据绑定,并使用 wire:submit 处理带有内置验证的表单提交 —— 完全无需编写一行 JavaScript。

何时使用 Livewire 而不是 Alpine.js

Alpine.js 与 Livewire 一起发布,用于处理轻量级的纯客户端交互 —— 切换下拉菜单、显示工具提示。当交互需要服务器端逻辑时,Livewire 是正确的选择:查询数据库、运行验证、保存数据或管理复杂状态。

使用 Alpine 进行 UI 优化。使用 Livewire 构建需要 Laravel 后端的响应式组件。

重要提示: 如果你的项目已经单独安装了 Alpine,请确保它没有被加载两次。Livewire 内部捆绑了 Alpine,重复的 Alpine 实例可能会导致冲突。

接下来探索什么

一旦你熟悉了基础知识,最有价值的下一步领域是:

  • wire:model 修饰符 — .live 用于实时更新,.blur 在字段失焦时同步
  • wire:loading — 在服务器处理请求时显示加载状态
  • 验证 — Livewire 直接与 Laravel 的验证器集成
  • 组件通信 — 使用 dispatch() 在组件之间发送事件

结论

当你开始用简单的 PHP 替换原本复杂的 JavaScript 时,Livewire 的真正优势就会显现出来。它让你保持在 Laravel 的约定范围内,同时提供用户期望从现代 Web 应用获得的响应式体验。从现有 Laravel 应用中的一个交互式表单开始,这种模式会立即变得清晰。

常见问题

不需要。Livewire 内部捆绑了 Alpine。在 Livewire 旁边安装单独的 Alpine 副本可能会在 Alpine 被加载两次时导致冲突。如果你的项目已经将 Alpine 作为独立依赖项包含,请确保在添加 Livewire 时不要重复安装。

可以,Livewire 可以与 Vue 或 React 共存。你可以将 Livewire 用于服务器驱动的交互式组件,并将 Vue 或 React 保留给需要大量客户端渲染的部分。它们独立运行,因此只要它们针对 DOM 的不同部分,就不会有固有冲突。

每次 Livewire 交互都会发送一个服务器请求,类似于标准的 AJAX 调用。对于大多数用例,开销可以忽略不计。但是,对于更新非常频繁的组件,例如大型表单中的实时输入,可能会受益于 wire:model 修饰符,如 .blur 或 .live,以减少不必要的往返。

Livewire 的兼容性取决于你安装的版本,因此在开始新项目之前,请务必查看官方 Livewire 安装和升级文档。对于新应用,请使用当前的 Livewire 文档,而不是依赖较旧的 v2 或 v3 教程。

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog