Livewire 组件需继承 LivewireComponent，用 public 属性实现响应式；搜索用 wire:model.live 触发服务端过滤；表单提交用 wire:submit.prevent 拦截并自动映射字段；常见问题多因目录结构、脚本缺失或在 render() 中修改状态导致。
Livewire 本身不禁止写 js，但它的核心价值是：绝大多数交互逻辑（表单提交、状态更新、条件渲染、分页、搜索）完全可以用 php 控制，无需手写 fetch、addEventListener 或管理 dom 状态。前提是组件结构清晰、响应式属性定义准确、避免在 render() 中做重操作。
如何定义一个可响应的 Livewire 组件？
Livewire 组件本质是一个 PHP 类，继承 LivewireComponent，通过 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 属性，并在服务端完成过滤逻辑。
-
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)—— 这绕过了响应式机制，且每次渲染都查库
@foreach ($filteredPosts as $post) - {{ $post->title }}
@endforeach
如何处理表单提交而不跳转页面？
用 wire:submit.prevent 替代原生 onsubmit，Livewire 会拦截提交、序列化表单字段、调用组件的 save() 方法（或任意命名的方法），再刷新视图 —— 全程无 JS 手动干预。
立即学习“前端免费学习笔记（深入）”；
-
wire:submit.prevent="save"必须配合表单内有name属性的字段（如），Livewire 才能自动映射到同名 PHP 属性 - 验证失败时，Livewire 自动注入
$Errors变量，可用@error('title') {{ $message }} @enderror - 成功后建议调用
$this->reset('title', 'content')清空表单，而不是手动赋值$this->title = ''（后者不触发响应式更新） - 若需重定向（如创建后跳转详情页），不能用
redirect()，而要用return redirect()->to('/posts/'.$post->id);—— Livewire 会识别并执行客户端跳转
常见掉坑点：为什么状态没更新 / 表单不提交？
多数问题源于 Livewire 的“隐式约束”被打破，不是语法错，而是机制误用。