Livewire组件需显式注册并用kebab-case调用；表单提交通过wire:submit.prevent交由Livewire处理；传参靠初始化快照，多组件需加key；渲染慢常因服务端耗时或hydration不匹配。
Livewire 组件怎么注册和调用
Livewire 不是靠 Blade 指令自动发现组件的，必须显式注册。没注册就直接 @livewire('counter')，页面会空白且控制台无报错——这是新手最常卡住的地方。
- 在
app/Http/Livewire/Counter.php写好类后，运行php artisan livewire:discover（Laravel 9+ 默认启用自动发现，但改名或重装后仍需手动触发） - 确保类名与文件名严格一致，且命名空间为
App\Http\Livewire - Blade 中调用必须用 kebab-case 形式：类名
UserProfileEditor→ 调用写成@livewire('user-profile-editor') - 若用
@livewire('counter')报 “Class does not exist”，先检查config/livewire.php的'class_namespace'是否被误改
如何在 Livewire 组件里响应表单提交而不刷新页面
核心不是写 JS，而是把传统 POST 表单交给 Livewire 处理。它会拦截 submit 事件、序列化数据、发 AJAX、更新 DOM，全程对开发者透明。
- Blade 中用
<form wire:submit.prevent="save">，.prevent是关键，否则浏览器默认提交会跳转 - 对应 PHP 方法
public function save()必须是 public，且不能带参数（Livewire 自动注入请求数据） - 如果表单含
<input wire:model="title">，修改输入框时 Livewire 已在后台同步更新 $this->title，无需额外监听 - 验证失败时，
$this->validate()会自动把错误塞进$errors，Blade 中直接用@error('title')<span>{{ $message }}</span>@enderror
Livewire 组件怎么复用和传参
不能像 Vue 那样 props 透传，Livewire 的参数传递本质是初始化时的属性快照，后续父组件变量变化不会自动同步子组件。
- 调用时传参用
@livewire('post-card', ['post' => $post, 'showActions' => true])，这些值会在组件构造函数或mount()方法中接收 - 组件内必须声明对应 public 属性：
public $post; public $showActions;，否则运行时报 “Undefined property” - 若想让子组件响应父数据变化，得用
dispatch()+listen()或升级到 Livewire 3 的<livewire:xxx :data="$value" />语法（Laravel 11+） - 多个同类型组件共存时，务必加
key：比如@livewire('comment-item', ['comment' => $c], key('comment-'.$c->id))，否则状态错乱
为什么 Livewire 渲染慢或出现闪烁
根本原因常是服务端渲染耗时 + 前端 hydration 不匹配。Livewire 默认等整个页面 HTML 解析完才激活交互，中间有白屏或闪动。
立即学习“前端免费学习笔记（深入）”；
- 开启
APP_DEBUG=false后，检查是否启用了APP_ENV=production下的缓存：运行php artisan config:clear和php artisan view:clear - 避免在
render()方法里做 DB 查询，应提前在mount()或hydrate()中查好并赋值给 public 属性 - 大量列表渲染时，用
wire:key替代 Blade 的@foreachkey：比如<div wire:key="item-{{ $item->id }}">，否则 Livewire 无法高效 diff - 如果组件只读（如展示卡片），加
#[On('refresh')] public function render() { ... }并用$wire.dispatch('refresh')手动触发，比全量重载更轻量
组件逻辑越贴近“状态机”而非“模板渲染器”，就越不容易掉进 Livewire 的隐式陷阱。比如把计算逻辑提到 getFormattedTitleProperty()，而不是在 Blade 里写三元表达式或 @if 堆叠。
