Livewire 组件需继承 Livewire\Component，用 public 属性实现响应式；搜索用 wire:model.live 触发服务端过滤；表单提交用 wire:submit.prevent 拦截并自动映射字段；常见问题多因目录结构、脚本缺失或在 render() 中修改状态导致。
Livewire 本身不禁止写 JS，但它的核心价值是：绝大多数交互逻辑（表单提交、状态更新、条件渲染、分页、搜索）完全可以用 PHP 控制，无需手写 fetch、addEventListener 或管理 DOM 状态。前提是组件结构清晰、响应式属性定义准确、避免在 render() 中做重操作。
如何定义一个可响应的 Livewire 组件？
Livewire 组件本质是一个 PHP 类，继承 Livewire\Component，通过 public 属性暴露响应式数据，用 $this->emit() 或 $this->dispatch() 触发前端事件（非必须），关键在于属性变更会自动同步到视图。
-
public属性（如$search、$posts）会被 Livewire 自动监听，修改后触发重渲染 -
protected $listeners = ['postUpdated' => 'refreshPosts'];可监听其他组件或 JS 发出的事件 - 不要在
render()方法里执行耗时查询（如Post::all()），应提前在mount()或方法中加载并缓存到属性 - 若属性是对象（如
Collection或 Eloquent 模型），确保它实现了可序列化；否则 Livewire 无法正确 diff 和传输
如何实现无 JS 的搜索与实时过滤？
依赖 wire:model.live（而非 wire:model）可启用防抖后的后台更新，避免每敲一个字都请求一次。它背后是 Livewire 自动绑定输入框与 PHP 属性，并在服务端完成过滤逻辑。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
-
wire:model.live="search"默认防抖 150ms；可加.debounce.300ms调整 - 过滤逻辑写在 getter 或方法里，例如：
public function getFilteredPostsProperty() { return Post::where('title', 'like', "%{$this->search}%")->get(); } - 模板中直接用
{{ $filteredPosts }}，Livewire 会自动调用该 getter 并缓存结果 - 注意：不要在模板中写
@foreach (Post::where(...)->get() as $p)—— 这绕过了响应式机制，且每次渲染都查库
<div>
<input type="text" wire:model.live="search" placeholder="Search posts...">
<ul>
@foreach ($filteredPosts as $post)
<li>{{ $post->title }}</li>
@endforeach
</ul>
</div>
如何处理表单提交而不跳转页面？
用 wire:submit.prevent 替代原生 onsubmit，Livewire 会拦截提交、序列化表单字段、调用组件的 save() 方法（或任意命名的方法），再刷新视图 —— 全程无 JS 手动干预。
立即学习“前端免费学习笔记（深入）”；
-
wire:submit.prevent="save"必须配合表单内有name属性的字段（如<input name="title">），Livewire 才能自动映射到同名 PHP 属性 - 验证失败时，Livewire 自动注入
$errors变量，可用@error('title') {{ $message }} @enderror - 成功后建议调用
$this->reset('title', 'content')清空表单，而不是手动赋值$this->title = ''（后者不触发响应式更新） - 若需重定向（如创建后跳转详情页），不能用
redirect()，而要用return redirect()->to('/posts/'.$post->id);—— Livewire 会识别并执行客户端跳转
常见掉坑点：为什么状态没更新 / 表单不提交？
多数问题源于 Livewire 的“隐式约束”被打破，不是语法错，而是机制误用。
- 组件类没有放在
app/Http/Livewire/下，或命名空间未设为App\Http\Livewire，导致路由无法解析 - Blade 模板中漏了
@livewireScripts（在
