PHP 組件未來：Livewire 4 正式發布，性能更快，功能更完整

盼了許久的 Livewire 4 終于發布，而且這次升級誠意十足，日常開發過程中的順滑度會立刻感受到。如果你已經習慣了 Livewire 3，此刻正好可以迎接更輕盈的交互體驗與顯著提升的執行效率。

?? Beta 提示：Livewire v4 目前仍處于 beta 階段，官方正密集迭代。建議先在開發或測試環境評估，再決定是否升級生產環境。期間可能出現破壞性變更，記得同步關注更新日志，也歡迎向 Livewire 團隊提交反饋。

原文 PHP 組件未來：Livewire 4 正式發布，性能更快，功能更完整

為什么值得升級到 Livewire 4？

先聊最核心的性能。Livewire 4 重寫了請求調度邏輯，尤其是并發交互的處理方式。以表單中的 wire:model.live 為例，如今每一次輸入都會獨立并行發送請求，彼此互不阻塞，打字和響應都更順暢。

同樣的優化也落在了 wire:poll 上。輪詢再也不會卡住其他請求，因此即便是幾秒刷新一次的數據看板，頁面交互依舊流暢，不會因為后臺輪詢而拖慢前端體驗。

單文件組件

這是最能立刻提速的功能之一。Livewire 4 引入 Single-File Components (SFC)，把 PHP 邏輯和 Blade 模板合并到一個文件，簡單任務不再需要來回切換。

php artisan make:livewire create-post

運行后會得到一個包含邏輯與模板的組件。如果項目仍需更明確的分層，你也可以保留 Multi-File Components：

php artisan make:livewire create-post --mfc

另外，基于視圖的組件文件默認會加上 ? 前綴，在編輯器里一眼就能分辨它們與普通 Blade 文件；如果不習慣，也能在配置中關閉。

Islands

Islands 帶來一次粒度更細的性能提升。你可以在組件內部圈出小島，讓它們各自更新，而不用再拆分成額外的子組件。

@island(name: 'stats', lazy: true)
    <div>{{ $this->expensiveStats }}</div><div>{{ $this->expensiveStats }}</div>
@endisland

想象一個包含多個小掛件的 dashboard：過去更新一個部分時常常要重渲整個頁面，如今通過 Islands，僅有實際變化的掛件會刷新，性能更好、結構更干凈。

wire:sort

拖拽排序以往要靠額外的前端庫，現在一條 wire:sort 指令就搞定：

<ul wire:sort="updateOrder">
    @foreach ($items as $item)
        <li wire:sort:item="{{ $item->id }}">
            {{ $item->name }}
        </li>
    @endforeach
</ul>

幾行代碼即可擁有可拖拽的列表，不用再手寫復雜的 JavaScript。

wire:intersect

wire:intersect 能在元素進入或離開視口時觸發動作，非常適合做無限滾動或惰性加載：

<div wire:intersect="loadMore">...</div>

還可以用修飾符精細控制觸發時機：

<!-- 只觸發一次 -->
<div wire:intersect.once="trackView">...</div>

<!-- 至少顯示一半再觸發 -->
<div wire:intersect.half="loadMore">...</div>

<!-- 自定義閾值 -->
<div wire:intersect.threshold.50="trackScroll">...</div>

Async Actions

給動作加上 .async 修飾符，就能在后臺并行處理，不再阻塞其他請求：

<button wire:click.async="logActivity">Track</button>

也可以直接在方法上使用屬性：

#[Async]
public function logActivity() {
    // 處理不需要即時回傳 UI 的任務
}

適合各種追蹤、日志或后臺操作，界面與數據可同時推進。

更優雅的 Loading 狀態

觸發網絡請求的元素會自動帶上 data-loading 屬性，可用 Tailwind 等工具輕松統一 Loading 樣式：

<button wire:click="save" 
    class="data-[loading]:opacity-50 
           data-[loading]:pointer-events-none">
    Save Changes
</button>

無需再到處寫 wire:loading，風格集中、維護更容易。

Deferred Loading

除了懶加載（進入視口才加載），現在還有 deferred loading，會在首屏渲染完成后立即加載組件：

<livewire:revenue defer />

也能將多個組件打包一起加載：

<livewire:revenue lazy lazy:bundle />
<livewire:expenses defer defer:bundle />

多種策略任你搭配，既兼顧首屏速度，也保留完整內容。

更強大的 JavaScript 集成

Livewire 4 與 JavaScript 更親和：基于視圖的組件可直接寫 <script>，無需再包 @script。

<div>
    <!-- 組件模板 -->
</div>

<script>
    // $wire 會自動以 this 綁定
    this.count++

    // 當然也能直接調 $wire
    $wire.save()
</script>

腳本會自動緩存，并拆分成獨立文件，加載更高效。

此外還新增了幾個實用的“魔法”屬性：

• $errors：在 JavaScript 里直接訪問錯誤集合。
• $intercept：攔截并修改 Livewire 請求。

<div x-show="$wire.$errors.has('email')">
    <span x-text="$wire.$errors.first('email')"></span>
</div>

<script>
  $wire.$intercept('save', ({ proceed }) => {
      if (confirm('Save changes?')) {
          proceed()
      }
  })
</script>

路由更一致

v4 推薦用 Route::livewire() 來注冊全頁面組件：

// v4 推薦寫法
Route::livewire('/dashboard', Dashboard::class);

// 基于視圖的組件也適用
Route::livewire('/dashboard', 'pages::dashboard');

這是目前的標準寫法，也是讓單文件、多文件組件當作全頁面組件運行的前提。

從 v3 升級

別被滿屏新功能嚇退。開發團隊對向后兼容做了很多功課，多數項目僅需小范圍調整即可升級，主要需關注配置文件與少量進階 API 的簽名變化。

必做的更新步驟

先升級依賴：

composer require livewire/livewire:^4.0@beta

清理緩存，避免舊配置殘留：

php artisan config:clear
php artisan view:clear

然后檢查 config/livewire.php，幾個鍵名或默認值有改動：

// 布局設定
'component_layout' => 'layouts::app', // 原為 'layout'

// 占位視圖
'component_placeholder' => 'livewire.placeholder', // 原為 'lazy_placeholder'

// smart wire:key 改為默認開啟
'smart_wire_keys' => true,

進階功能

更細粒度的攔截器系統

過去的 commit、request 鉤子已經由新的 interceptor 機制取代：

Livewire.interceptMessage(({ component, message, onFinish, onSuccess, onError }) => {
    onFinish(() => {
        // 請求結束后
    })

    onSuccess(({ payload }) => {
        // 返回成功時
    })

    onError(() => {
        // 出現錯誤
    })
})

新系統能區分網絡故障與服務端錯誤，支持取消請求，也可針對指定組件啟用。

CSP Safe 模式

若應用啟用了嚴格的 Content Security Policy，可開啟：

'csp_safe' => true,

Livewire 會切換到 Alpine 的 CSP 版本，避免 unsafe-eval；不過復雜的內聯表達式會受到限制。

wire:ref

@foreach ($comments as $comment)
    <div wire:ref="comment-{{ $comment->id }}">
        {{ $comment->body }}
    </div>
@endforeach

<button wire:click="$refs['comment-123'].scrollIntoView()">
    Scroll to Comment
</button>

一行 wire:ref 即可建立引用，再通過 $refs 調用原生瀏覽器 API。

更多順手的修飾符

• .renderless：在模板層阻止組件重新渲染，適合純動作。
• .preserve-scroll：更新時保留滾動位置，避免頁面跳躍。

<button wire:click.renderless="trackClick">Track</button>
<button wire:click.preserve-scroll="loadMore">Load More</button>

上線前的測試清單

v4 仍處于 beta，上線前不妨按以下步驟打個底：

1. 準備獨立測試環境，別直接在生產上實驗。
2. 重點驗證核心功能，尤其是業務依賴最深的模塊。
3. 留意版本公告，beta 之間可能伴隨破壞性調整。
4. 積極反饋問題，幫助官方更快收斂問題。
5. 保留回滾方案，隨時能夠切回 v3。

總結

Livewire 4 不是例行升級，而是一場全面進化：性能更快、開發體驗更順手、擴展性更強。從單文件組件、Islands，到 async actions、全新的指令生態，都在幫你把精力集中在業務問題，而非樣板代碼。

更值得一提的是，這套能力可以循序漸進地引入，不必一次性重構現有系統。官方文檔與社區資源也已經到位，遇到問題隨時有人能幫忙。

趁著 beta 階段探索、提意見，等穩定版發布時，你的團隊也已掌握這些新工具，隨時可以投入生產。