livewire-best-practices

<p align="left"><img width="300" src="https://yellow-cdn.veclightyear.com/0a4dffa0/f392956b-b6be-4639-816c-f5e0fd980098.png" alt="Livewire标志"></p>

Livewire最佳实践

本仓库是一个精选列表，包含了如何使用Laravel Livewire框架来满足企业对Livewire组件的安全性、性能和维护性等方面的一般建议。

简短介绍

我是Michael Rubél，我从2019年Livewire框架刚推出且几乎不稳定时就开始使用它。当时，我对于如何快速开发动态UI而无需使用JavaScript感到印象深刻。但是像任何软件解决方案一样，它也有其缺陷，我不得不应对这些问题。本仓库的主要目标是收集在使用Livewire时需要考虑的最重要经验。

让我们开始吧...

---

🌳 始终设置根元素

Livewire要求每个组件都有一个根元素（div）。你应该始终在<div>你的代码在这里</div>内编写代码。省略这个结构将导致更新组件时出现许多问题。

示例

---

✨ 高性能Livewire的黄金法则

不要向Livewire组件传递大型对象！

尽可能避免将对象传递给组件的公共属性。使用原始类型：字符串、整数、数组等。这是因为Livewire在每次向服务器请求时都会序列化/反序列化你的组件负载，以在前端和后端之间共享状态。如果你需要处理对象，可以在方法或计算属性内创建它们，然后返回处理结果。

什么可以被视为大型对象？

• 任何像Eloquent模型那样大的实例对Livewire来说已经足够大，可能会减慢组件生命周期，从而导致实时更新性能不佳。例如，如果你有一个表示用户资料（电子邮件和用户名）的组件，请将这些参数作为字符串传递给属性。

注意：如果你使用全页面组件，建议在全页面组件本身获取对象，然后将它们作为原始类型向下传递给嵌套组件。

---

🧵 保持组件嵌套层级为1

如果你有一个Livewire组件（0）包含另一个Livewire组件（1），那么你不应该再进一步嵌套（2+）。过多的嵌套可能会在处理DOM对比问题时造成麻烦。

此外，在使用嵌套时优先使用Blade组件，它们能够与父级Livewire组件通信，但不会增加Livewire带来的开销。

示例

---

📝 利用表单对象

Livewire v3引入了一个名为表单对象的新抽象层。始终使用它们，因为这会使你的组件在长期维护中更易于管理。

文档

---

🕵️ 不要向组件传递敏感数据

避免可能导致向Livewire组件传递敏感数据的情况，因为默认情况下可以轻易从客户端访问这些数据。从Livewire版本3开始，你可以使用#[Locked]属性来隐藏前端的属性。

---

☔ 优先使用事件监听器而不是轮询

与其不断轮询页面来刷新数据，不如使用事件监听器，只在从另一个组件发起特定任务后才执行组件更新。

示例

---

📦 使用计算属性访问数据库

你可以使用计算属性来避免不必要的数据库查询。计算属性在组件的生命周期内被缓存，不会在组件类或blade视图中多次运行。从Livewire v3开始，计算属性的结果还可以缓存在通用的应用级缓存中（例如Redis），参见。

示例

🗺️ 使用路由模型绑定来获取模型

只需向 mount 方法传递 ID 或 UUID，然后将模型属性映射到组件属性。请记住：不要分配整个模型，而只分配其属性。为避免手动映射模型属性，你可以使用 fill 方法。

示例

---

💡 尽可能避免使用 live wire:model 修饰符

避免使用 live wire:model 修饰符。这可以大大减少不必要的服务器请求。 在 Livewire 版本 3 中，所有模型默认都是延迟的（旧版：defer 修饰符），这是一个好做法。

示例

---

👨‍💻 使用 Artisan 命令来创建、移动和重命名组件

Livewire 有内置的 Artisan 命令用于创建、移动、重命名组件等。 例如，与其手动重命名文件（这可能容易出错），你可以使用以下命令：

• php artisan livewire:move Old/Path/To/Component New/Path/To/Component

---

💱 始终使用加载状态以提升用户体验

你可以使用加载状态来改善用户体验。如果你的处理过程运行时间超出预期，这将向用户指示背景中正在发生某些操作。为避免闪烁，你可以使用 delay 修饰符。

示例

---

📈 使用延迟加载

与其阻塞页面渲染直到数据准备就绪，你可以使用延迟加载技术创建一个占位符，使你的 UI 更加响应迅速。

示例

---

🔗 Entangle

使用 $wire.entangle 指令将你的数据与后端同步。这样，模型将在前端立即更新，并且数据将在网络请求到达服务器后在服务器端持久化。这极大地改善了在慢速设备上的用户体验。这种方法在其他前端社区中被称为"乐观响应"或"乐观 UI"。

示例

---

🌎 使用表单请求规则进行验证

Livewire 内部不支持表单请求，但你可以直接从表单请求中获取验证规则数组，而不是在组件中硬编码验证规则数组。 这样，你可以在不同的应用层中重用相同的验证规则，例如在 API 端点中。

示例

---

🧪 始终编写功能测试

即使是简单的测试也能在你修改组件时大有帮助。 Livewire 有一个简单yet强大的测试 API。

---

🔨 你是否每天都在使用 Livewire？
如果你没有在列表中看到你的最佳实践，请提出建议。
如果你不确定这是否是一个好的实践，你可以开始一个讨论。

贡献者