iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!系列 第 16

Day 16 | 元件狀態:預載 及 延遲載入 Prefetch & Defer Loading

今天因為這兩個功能都比較簡單,因此合在一起講。分別是 預載(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

https://ithelp.ithome.com.tw/upload/images/20210918/20111805CGy2kgB2rj.png


延遲載入 - Defer Loading

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

官方文件的範例中是一個顯示所有文章的頁面,一開始時 $readyToLoadfalse 因此在渲染時的判斷式會給 $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>

上一篇
Day 15 | 元件狀態:污染(被更改) Dirty
下一篇
Day 17 | 常用範例:前後端共用的表單輸入驗證 Validate
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34

尚未有邦友留言

立即登入留言