今天因为这两个功能都比较简单，因此合在一起讲。分别是 预载(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>