为什么你的 Livewire 控制面板会跳动（以及如何修复）- Laravel 实战 EP18
最后更新于 经过 哈里斯·拉夫托普洛斯
▶️ 观看视频教程 （5分钟）
您的实时仪表盘运行正常。新订单会及时到来，数据也会更新。但每次 Livewire 重新渲染时，整个页面都会跳回到顶部。用户会丢失当前浏览位置，动画效果也会中断，整个体验非常卡顿。
如果你的仪表盘能够实时更新，而无需修改 DOM，那会怎么样？
在本期 Laravel 实战中，我将向您展示如何结合 Livewire 的 skip render 方法和 Alpine.js 来解决 Livewire 控制面板中的页面跳转问题。您将学习如何在 Livewire 重新渲染之前拦截实时事件，如何直接通过 Alpine 更新统计数据和订单表，以及如何为新订单添加流畅的动画效果。
诀窍在于让 Alpine.js 处理 UI 更新，而 Livewire 则无需干预。我们并非每次订单到达时都重新渲染整个组件，而是使用 skipRender 来保持页面稳定，并将新数据直接推送到 Alpine 的响应式状态中。最终呈现的仪表盘如同原生应用般流畅，没有闪烁或跳动，只有平滑的更新。
这直接建立在第 17 集的实时基础之上，我们在第 17 集中添加了混响和回声效果。那一集实现了数据的实时流动。而这一集则让用户体验真正变得良好。
▶️ 立即观看第18集 →
归档于：
