延续昨天的内容，在昨天理解完 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