延續昨天的內容，在昨天理解完 mount() 後，今天就開始來對資料進行操作吧！！

資料綁定

如果用過 Vue 對這個一定已經很熟悉。如果沒用過那這個也非常容易理解，實際操作過一遍就回不去了XDD

class Day6 extends Component
{
    public $title;
}

<div>
    <h2>{{ $title }}</h2>
    <input type="text" wire:model="title">
</div>

這邊我們透過 wire:model="title" 將 $title 綁定在這個 <input> 元素上。只要去變動這個 <input> 的內容就會同步更新到 $title 這個變數上，同時也會一併更新底下 <h2>{{ $title }}</h2> 所顯示的內容。

原理是透過 AJAX 在背景不斷的傳輸並重新渲染畫面。只是以往都是我們手動去做，現在 Livewire 就會在背後自動幫我們做囉！

請求太多了怎麼辦？

如果用 php artisan serve 開啟這個專案的話，那就可以透過終端機視窗發現到你每次在 <input> 打一個字就會發送一次請求，最終導致伺服器效能堪憂。這時候有幾個方法能解決這個問題：

定時更新 - Debouncing Input

這個方法能夠手動設定一段時間去更新一次（預設是150ms），來避免打字時不斷的觸發更新。但我個人覺得這個功能其實並沒有以下兩個好用。

<input type="text" wire:model.debounce.500ms="name">

懶更新 - Lazy Updating

等同於 Vue.js 的 @change 事件。簡單來說就是完成這個輸入匡後才會觸發更新，在 <select> 中是選好後觸發，在 <input> 中則是按下 Enter 或是滑鼠移開輸入匡後觸發。

<input type="text" wire:model.lazy="message">

延遲更新 - Deferred Updating

當你觸發下一次更新時才一併更新。這個在表單輸入時，若沒有要做即時的表單驗證，那這個就非常適合來作為表單輸入時的更新方式，最後資料會在你按下送出按鈕的同時才一起做一次更新。

<input type="text" wire:model.defer="query">
<button wire:click="search">Search</button>

計算屬性

Livewire 當然也有 Computed 屬性啦！它能夠即時從資料庫或是一些緩存中拿到最新的值！

class ShowPost extends Component
{
    // Computed Property
    public function getPostProperty()
    {
        return Post::find($this->postId);
    }
}

這邊的 getPostProperty 是固定的語法糖，在前端頁面要透過 $this->post 來拿getPostProperty的東西。

<div>
    <h1>{{ $this->post->title }}</h1>
    ...
    <button wire:click="deletePost">Delete Post</button>
</div>

如果要改成拿 User 則要改成 getUserProperty。

注意：這邊的計算屬性 並不是 在其他頁面有更動到資料庫都會讓這裡更新，而是要在目前這個頁面中去對這個資料表操作才會更新計算屬性的值。

範例

GitHub 網址在這邊

運行之後打開 http://127.0.0.1:8000/day6 就能看到今天的範例啦

檔案的話分別在：
app\Http\Livewire\Example\Day6.php
resources\views\livewire\example\day6.balde.php