Neekko33's Blog

Livewire入门

2025年10月28日

Livewire 简介

Livewire 是一个为 Laravel 打造的前后端一体化框架，对前端开发来说定位类似于 Next.js 和 Nuxt.js 的感觉。不过区别是 Next.js 等想要实现的目标是只用 JavaScript 来完成全栈开发，而 Livewire的目标则是几乎不使用 JavaScript 就可以完成现代前端的交互效果。

详细可以参考官方文档。

简单体验来看，Livewire 在前端的语法和 Vue 类似，前端开发也可以很快上手。对于熟悉 Laravel 的开发者开发前端交互没有特别复杂的应用来说是一个不错的选择。

创建 Livewire 模板

在安装 livewire 包之后，可以通过 artisan 命令创建 livewire 组件

bash 复制代码 
php artisan make:livewire Todo

命令会自动创建两个文件，分别为：Todo.php和todo.blade.php。前者类似于 vue 文件中的 script 标签内容 + Laravel 的 controller 文件。（包含数据库交互、变量和方法声明以及生命周期等等功能）后者则是模板文件，用于展示数据和定义页面UI。

可以直接在 Blade 模板中引用这个组件 <livewire:todo>

Action & Properties & Lifecycle

下面通过一个简单的 Todo 应用快速了解一下 livewire 的基础知识：

在组件中声明 todo 和 todos 两个属性，分别用于存储输入的待办事项和待办事项列表

php 复制代码 
class Todos extends Component
{
  public $todo = '';
  public $todos = [
    'Take out trash',
    'Do dishes',
  ];
  // ....
}

组件中声明的属性可以在blade文件中直接访问。

php+HTML 复制代码 
<div>
  <input type="text">
  <button type="button">
    Add
  </button>
  <ul>
    @foreach ($todos as $todo)
    	<li>{{ $todo }}</li>
    @endforeach
  </ul>
</div>

与 Vue 类似，Livewire 可以使用wire:xxx来为标签绑定action。例如：wire:click类似于Vue中的@click，wire:model类似Vue中的v-model。

php+HTML 复制代码 
<input type="text" wire:model="todo">
<button type="button" wire:click="add">
	Add
</button>

需要注意一点，和 Vue 的 v-model 不同，Livewire 并非在前端管理状态，而是通过请求的方式实现前后端同步。为了避免不必要的请求，wire:model在输入内容的时候并不会前后端同步 todo 的值，而是在点击 Add 按钮时修改 todo。（如果想要实现每次输入值变动的时候都会与后端同步，可以使用wire:model.live。并且可以自定义防抖或节流时间）

下一步在组件中添加一个增加待办事项的 add 方法

php 复制代码 
class Todos extends Component
{
  public $todo = '';
  public $todos = [
    'Take out trash',
    'Do dishes',
  ];
  
  public function add()
  {
    $this->todos[] = $this->todo;
    $this->reset('todo'); // 恢复默认值
  }
  // ....
}

这样就可以成功添加一个代办事项，但是因为只是在按钮标签上使用wire:click监听点击事件，当用户输入后使用回车时，并不能触发 add 方法。我们可以修改监听，使用 Form 标签来完成提交。

php+HTML 复制代码 
<form wire:submit="add">
  <input type="text" wire:model="todo">
	<button type="submit">Add</button>
</form>

通过使用原生表单标签和提交按钮，无论是回车还是点击按钮都可以添加待办事项了。

在实际情况中，我们的待办事项不会直接定义在属性中，而是存储在数据库或者其他服务里。因此我们需要使用 Livewire 的生命周期来进行一些操作。常用的生命周期有 mount 和 updated。

其中 mount 是页面渲染后执行的钩子函数，updated 则是在属性发生变更后执行。（可以使用 updated + 属性名称来监听某个特定属性的变更，例如：updatedTodo）

php 复制代码 
class Todos extends Component
{
  public $todo = '';
  public $todos = [];
  
  public function mount()
  {
  	$this->todos = ['Learn Livewire', 'Build a Todo App'];
  }

  // ....
}
相关文章