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 元件 (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 合作嗎？
如果您在清單中沒有看到它們，請提出您的最佳實踐建議。
如果您不確定這是否是一個好的做法，您可以開始討論。
