學習Laravel13+Livewire3 - 文件 #4: 模組 3：Livewire 3 核心概念（8–10 小時）

Jeffery Hsu
2026-04-26T14:07:03Z

這個模組的內容非常豐富，Livewire 3 也是現代 Laravel 生態系中最具革命性的技術之一。為了確保你能完全吸收並實作成功，我會將模組 3 分為 三個部分 來逐步講解。

今天我們先進行 第一部分，專注於：Livewire 3 核心概念、建立元件、資料綁定（Deferred vs Live），並直接帶你完成 Counter（計數器） 與 Live Search（即時搜尋） 的實作。

第一步：Livewire 3 核心概念與環境確認¶

什麼是 Livewire？
Livewire 是一個能讓你用 純 PHP 來撰寫動態、反應式 (Reactive) 前端介面的框架。你不需要寫任何 JavaScript (如 Vue 或 React) 或手動處理 AJAX 請求。當使用者在畫面上點擊按鈕或輸入文字時，Livewire 會自動在背景發送輕量級的網路請求到伺服器，執行你的 PHP 邏輯，然後精準地只更新畫面上變動的部分。

環境確認：
因為我們在模組 1 使用了 Laravel Breeze (Livewire + Flux) Starter Kit，所以 Livewire 3 已經內建安裝好了，無需再執行 composer require livewire/livewire。

第二步：建立第一個元件與核心三元素 (屬性、動作、視圖)¶

我們直接透過實作 Counter (計數器) 來學習核心概念。

1. 建立元件
在終端機執行：

php artisan make:livewire Counter

這會自動產生兩個檔案：

Class (邏輯): app/Livewire/Counter.php

View (畫面): resources/views/livewire/counter.blade.php

2. 撰寫 Class (定義屬性 Properties 與動作 Actions)
打開 app/Livewire/Counter.php：

namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    // 1. 屬性 (Properties)：這裡的 public 變數會自動暴露給前端視圖
    public int $count = 0;

    // 2. 動作 (Actions)：前端觸發的方法
    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

3. 撰寫 View (視圖與事件綁定)
打開 resources/views/livewire/counter.blade.php。在 Livewire 3 中，根元素不強制只能有一個 div，但保持乾淨的結構是好習慣：


基礎計數器


        <flux:button wire:click="decrement" variant="danger">-</flux:button>

{{ $count }}

        <flux:button wire:click="increment" variant="primary">+</flux:button>



4. 在頁面中渲染元件
打開我們模組 2 建立的 resources/views/dashboard.blade.php，把元件放進去：

<x-layouts.app>
    <x-slot:title>我的儀表板</x-slot>


        <livewire:counter />

</x-layouts.app>

驗證：現在去瀏覽器重新整理儀表板，點擊 + 和 - 按鈕，數字會即時變動，且完全不需要重新載入網頁！

第三步：資料綁定 (Data Binding) 與 Live Search 實作¶

Livewire 3 的一大變革是：預設的資料綁定是 Deferred (延遲的)。這代表當你輸入文字時，不會每打一個字就發送請求，而是在你執行某個 Action (例如點擊送出按鈕) 時，才會把資料一次送給後端。這極大地節省了伺服器效能。

但如果是 Live Search (即時搜尋)，我們需要每打一個字就更新畫面，這時就要加上 .live 修飾詞。

1. 建立 Live Search 元件

php artisan make:livewire StockSearch

2. 撰寫 Class (包含 Computed Properties)
這裡我們運用 #[Computed] 屬性。它會快取運算結果，避免在同一個 Request 中重複查詢資料庫。為了展示，我們模擬一個搜尋台灣 AI 概念股與半導體供應鏈的資料庫：

打開 app/Livewire/StockSearch.php：

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Computed;

class StockSearch extends Component
{
    // 綁定到前端輸入框的字串
    public string $search = '';

    // 模擬資料庫
    protected array $allStocks = [
        ['code' => '2317', 'name' => '鴻海', 'sector' => 'AI 伺服器'],
        ['code' => '2328', 'name' => '廣宇', 'sector' => '連接器與線束'],
        ['code' => '2330', 'name' => '台積電', 'sector' => '晶圓代工'],
        ['code' => '8028', 'name' => '昇陽半導體', 'sector' => '再生晶圓'],
        ['code' => '3231', 'name' => '緯創', 'sector' => 'AI 伺服器'],
    ];

    // Livewire 3 新寫法：使用 #[Computed] 取代舊版的 getFooProperty()
    #[Computed]
    public function results()
    {
        if (empty($this->search)) {
            return [];
        }

        return array_filter($this->allStocks, function ($stock) {
            return str_contains($stock['code'], $this->search) ||
                   str_contains($stock['name'], $this->search);
        });
    }

    public function render()
    {
        return view('livewire.stock-search');
    }
}

3. 撰寫 View (使用 wire:model.live)
打開 resources/views/livewire/stock-search.blade.php：


即時個股搜尋 (Live Search)

    <flux:input
        wire:model.live.debounce.300ms="search"
        placeholder="請輸入股票代號或名稱 (例如: 2328, 廣宇)..."
        icon="magnifying-glass"
    />


        @if(!empty($search))

                @forelse($this->results as $stock)

{{ $stock['code'] }} {{ $stock['name'] }}
{{ $stock['sector'] }}

                @empty
找不到符合「{{ $search }}」的股票。
                @endforelse

        @endif



4. 將搜尋元件加入儀表板
再次打開 resources/views/dashboard.blade.php，在剛剛的 Counter 下方加入：

<livewire:stock-search />

第四步：驗證你的作法¶

1. 確保伺服器 (php artisan serve) 正在運行。

2. 回到瀏覽器，進入你的儀表板頁面。

3. 驗證 Counter： 點擊加減號，確認畫面不閃爍即可更新數字。

4. 驗證 Live Search： 在搜尋框中輸入 2，停頓一下，下方應該會立刻滑出 2317、2328、2330 的選項。接著輸入 廣宇 或 2328，列表應該會精準過濾到只剩一筆。

如果以上都順利執行成功，就代表你已經完全掌握了 Livewire 3 的資料流、雙向綁定與即時反應機制。

準備好進入 模組 3 第二部分 (表單處理、驗證、Form Objects 與 Todo List 實作) 時，請隨時告訴我！