livewire best practices
2.1.1
该存储库是关于如何使用 Laravel Livewire 框架来满足企业对 Livewire 组件的安全性、性能和维护问题的一般建议的精选列表。
我的名字是 Michael Rubél，我于 2019 年开始使用 Livewire 框架，当时它还很新，而且还不稳定。回想起来，我对动态 UI 的快速交付印象深刻，甚至无需使用 JavaScript。但就像任何软件解决方案一样，它也有其缺陷，而我必须处理它们。该存储库的主要目标是收集您在使用 Livewire 时需要考虑的最重要的经验。
让我们开始吧...
Livewire 需要每个组件中有一个根元素 (div)。您应该始终在<div>Your Code Here</div>内编写代码。省略这个结构会导致更新组件时出现很多问题。
例子
Don't pass large objects to Livewire components!如果可能的话，避免将对象传递给组件的公共属性。使用原始类型：字符串、整数、数组等。这是因为 Livewire 会在每次向服务器发出请求时序列化/反序列化组件的有效负载，以在前端和后端之间共享状态。如果需要处理对象，可以在方法或计算属性内创建它们，然后返回处理结果。
大物体要考虑什么？
注意：如果您使用全页组件，建议在全页组件本身中获取对象，然后将它们作为原始类型传递给楼下的嵌套组件。
如果您的 Livewire 组件 (0) 包含另一个 Livewire 组件 (1)，则不应将其嵌套得更深 (2+)。在处理 DOM diff 问题时，过多的嵌套可能会让人头疼。
此外，在使用嵌套时更喜欢使用 Blade 组件，它们将能够与父级的 Livewire 组件进行通信，但不会产生 Livewire 增加的开销。
例子
Livewire v3 引入了一个名为Form Objects的新抽象层。始终使用它们，因为从长远来看，这会使您的组件更易于维护。
文档
避免可能导致将敏感数据传递到 Livewire 组件的情况，因为默认情况下可以从客户端轻松访问这些数据。从 Livewire 版本 3 开始，您可以使用#[Locked]属性从前端隐藏属性。
您可以使用事件侦听器仅在从另一个组件启动特定任务后执行组件更新，而不是不断轮询页面来刷新数据。
例子
您可以使用计算属性来避免不必要的数据库查询。计算属性在组件的生命周期内缓存，并且不会在组件类或刀片视图中多次运行。从 Livewire v3 开始，计算属性的结果也可以缓存在通用应用程序级缓存（例如 Redis）中，请参阅。
例子
仅将 ID 或 UUID 传递给mount方法，然后将模型属性映射到组件属性。请记住：不要分配整个模型，而仅分配其属性。为了避免手动映射模型属性，您可以使用fill方法。
例子
避免使用live电线：模型修改器。这极大地减少了对服务器的不必要的请求。在 Livewire 版本 3 中，所有模型都默认延迟（旧： defer修饰符），这很好。
示例
Livewire 具有内置的 Artisan 命令来创建、移动、重命名组件等。例如，您可以使用以下命令，而不是手动重命名文件（这可能容易出错）：
php artisan livewire:move Old/Path/To/Component New/Path/To/Component您可以使用加载状态来改善用户体验。如果您的进程运行时间超过预期，它将向用户表明后台正在发生某些事情。为了避免闪烁，您可以使用delay修改器。
例子
您可以使用延迟加载技术创建占位符，以使 UI 响应更快，而不是在数据准备就绪之前阻止页面渲染。
例子
使用 $wire.entangle 指令将数据与后端同步。这样模型将在前端立即更新，并且在网络请求到达服务器后数据将保留在服务器端。它极大地改善了慢速设备上的用户体验。这种方法在其他前端社区中被称为“乐观响应”或“乐观 UI”。
例子
Livewire 内部不支持表单请求，但您可以直接从表单请求获取它，而不是在组件中硬编码验证规则数组。这样您就可以在不同的应用程序层（例如 API 端点）中重用相同的验证规则。
例子
当您更改组件中的某些内容时，即使是简单的测试也能提供很大帮助。 Livewire 拥有简单而强大的测试 API。
您每天都与 Livewire 合作吗？
如果您在列表中没有看到它们，请提出您的最佳实践建议。
如果您不确定这是否是一个好的做法，您可以开始讨论。
