SuperAPI AI 工具集

laravel-livewire

编程与开发

查看项目

更新于 10-15 08:53

技能介绍

Laravel Livewire 是一个全栈 Laravel 框架技能包,用于仅使用 PHP 构建动态、响应式的 Laravel 界面,无需编写 JavaScript。Livewire v4+ 采用服务端渲染,通过 hydration/dehydration 机制实现客户端自动更新。

【安装与快速开始】 通过 Composer 安装:composer require livewire/livewire 创建布局:php artisan livewire:layout # Creates resources/views/layouts/app.blade.php 创建组件:php artisan make:livewire CreatePost(单文件组件);php artisan make:livewire pages::post.create(页面组件);php artisan make:livewire CreatePost --mfc(多文件组件);php artisan make:livewire CreatePost --class(基于类的传统组件)。

【核心概念】 组件结构支持单文件组件(PHP 类与 Blade 模板在同一文件中,闪电符号 ⚡ 可选,可在配置中禁用)、多文件组件(PHP、Blade、JS、CSS 分开,适合含大量 JavaScript 的大型组件)、基于类的组件(app/Livewire/CreatePost.php,传统 Laravel 结构)。

属性管理:公有属性在模板中以 $property 访问;受保护属性通过 $this->property 访问且不发送到客户端;支持类型化属性,如 public string $email;可使用 $this->reset('title', 'content') 重置属性,$this->pull('title') 获取并重置。

生命周期钩子包括:mount() 仅首次加载时运行,接收属性/路由参数;boot() 每次请求(初始及后续)运行;hydrate() 后续请求开始时运行;dehydrate() 每次请求结束时运行;updating($prop) 属性更新前运行;updated($prop) 属性更新后运行;rendering() 渲染前运行;rendered() 渲染后运行;exception($e) 抛出异常时运行。

计算属性通过 #[Computed] 属性定义,按请求记忆化派生值,通过 $this->property 访问;#[Computed(persist: true, seconds: 3600)] 可跨请求缓存。

【数据绑定】 wire:model 修饰符:默认仅在动作提交时更新;.live 随输入更新(150ms 防抖);.blur 用户点击离开时更新;.change 选择后立即更新;.debounce.500ms 自定义防抖;.number 服务端转为 int;.boolean 服务端转为 bool。依赖选择时需使用 wire:key。

【动作与事件】 事件监听示例:<button wire:click="save">Save</button>;<input wire:keydown.enter="search">;<form wire:submit="submitForm">。事件修饰符支持 .prevent、.stop、.window、.once、.debounce.250ms 等。可从 PHP 派发事件:$this->dispatch('post-created', postId: $post->id);也可从 Blade 客户端派发。使用 #[On('post-created')] 在 PHP 中监听。父子组件通信支持传递属性、#[Reactive] 响应式属性及直接父级访问 $parent.remove({{ $id }})。

【表单与验证】 使用 #[Validate('required|min:5')] 为属性添加验证规则;实时验证可通过 wire:model.live 配合 @error 指令;表单对象可抽取为可复用类:php artisan livewire:form PostForm。

【加载状态】 使用 wire:loading 显示加载状态,wire:target 定位特定动作,data-loading:opacity-50 作为 CSS 属性。

【高级功能】 懒加载:<livewire:revenue-chart lazy /> 或 #[Lazy] 属性配合 placeholder()。轮询:wire:poll、wire:poll.15s、wire:poll.visible、wire:poll.keep-alive。文件上传:使用 Livewire\WithFileUploads trait,支持 #[Validate('image|max:1024')] 验证及 temporaryUrl()。分页:使用 Livewire\WithPagination trait 与 Post::paginate(10)。Alpine.js 集成:x-data、@click、x-show,可通过 $wire 访问 Livewire。

【测试与路由】 使用 Livewire::test(CreatePost::class) 进行测试,支持 assertStatus、set、call、assertRedirect、assertHasErrors。路由示例:Route::livewire('/posts/create', 'pages::post.create'); Route::livewire('/posts/{post}', 'pages::post.edit'); 支持模型绑定。

【PHP 属性参考】 包括 #[Validate('rule')]、#[Computed]、#[Computed(persist: true)]、#[Locked]、#[Reactive]、#[On('event')]、#[Lazy]、#[Session]、#[Url]、#[Renderless]、#[Async]、#[Layout('name')]、#[Title('Title')]、#[Js]。

【常见陷阱】 计算属性需用 $this->posts 而非 $posts;默认 wire:model 不随输入更新,需 .live 修饰符;依赖选择需 wire:key 防止选项陈旧;属性默认非响应式,需 #[Reactive];始终验证/授权属性,视为用户输入;使用 only() 或 except() 限制发送到客户端的数据。

【安全最佳实践】 始终授权动作参数(用户可调用任何公有方法);对敏感 ID 使用 #[Locked] 防止篡改;将危险方法标记为 protected/private 防止客户端访问;验证所有输入;绝不相信客户端数据。

【性能提示】 对昂贵查询使用计算属性;懒加载首屏以下组件;非实时场景使用 .blur 替代 .live;避免将大型 Eloquent 集合存为属性;列表项使用 wire:key 防止 DOM 抖动;对实时更新防抖;使用 #[Computed(persist: true)] 缓存昂贵操作。

【参考资料】 组件架构见 references/core.md;表单与验证见 references/forms.md;高级功能见 references/advanced.md;指令见 references/directives.md;属性见 references/attributes.md;集成见 references/integration.md;测试见 references/testing.md。