今天因為這兩個功能都比較簡單，因此合在一起講。分別是 預載(Prefetching) 與 延遲載入(Defer Loading)，那就來看看這兩個的功用是什麼吧！

預載 - Prefetching

Livewire 上的預載是指在滑鼠移動到按鈕上時就會去執行原本 按下 後才會執行的 Function，雖然已經執行了但在按下前都不會顯示執行的結果。如果後來一直都沒有按下，則該請求會自動無效。

注意：官方文件只建議用在不會對資料庫存取的功能上，避免造成不可預期的錯誤！！

<button class="ui button" wire:click.prefetch="addCount">Add</button>

<h5>Count: {{ $count }}</h5>

因為在確實按下去前都不會有資料的渲染，所以在頁面上沒辦法觀察到預先載入是否真的有執行（就像薛丁格的貓）。建議透過 php artisan serve 運行的終端機來看請求產生的時間點，因為頁面觀察不出來 DEMO 就不放啦，不過 DEMO 的檔案還是有喔～ 詳見 GitHub

延遲載入 - Defer Loading

透過 wire:init 能讓指定的 Function 在頁面渲染完成時才開始執行，能夠很好的解決拉太多資料導致頁面讀取緩慢的問題！

在官方文件的範例中是一個顯示所有文章的頁面，一開始時 $readyToLoad 是 false 因此在渲染時的判斷式會給 $posts 一個空的陣列 []。

當頁面渲染完畢後，觸發了 wire:init="loadPosts" 將 $readyToLoad 改為 true，因此會開始加載所有文章的資料 Post::all()，加載完後頁面上的 $posts 就會有資料啦。

class ShowPost extends Component
{
    public $readyToLoad = false;
 
    public function loadPosts()
    {
        $this->readyToLoad = true;
    }
 
    public function render()
    {
        return view('livewire.show-posts', [
            'posts' => $this->readyToLoad
                ? Post::all()
                : [],
        ]);
    }
}

<div wire:init="loadPosts">
    <ul>
        @foreach ($posts as $post)
            <li>{{ $post->title }}</li>
        @endforeach
    </ul>
</div>