Laravel-Livewire笔记系列(四)-Livewire前后端数据双向绑定

作者：温新

时间：2021-08-14

hi，我是温新，一名PHPer

1）本系列笔记使用Laravel8.x作为演示；

2）使用Livewire2.x版本

Livewire提供了数据的双向绑定的功能，与Vue等不同的是，Livewire数据双向绑定直接绑定到了后端，也就是说每改动一次就会发送请求一次，连同后端的数据都直接修改了。虽然便利，但这样的数据绑定带来了一个问题，效能消耗问题，好在Livewire提供了解决方法。

本案例基于 Laravel-Livewire笔记系列(三)-Livewire好用得过分的前后端交互 作为演示。由于变量数据都是存在的，因此直接修改组件模板即可。

wire:model双向绑定

第一步：修改组件模板

方法：wire:model="变量名"

// livewire/sutdy-list.blade.php
<div>
    <p>我是livewire组件</p>
    <p wire:click="getWebName">{{ $webName }}</p>
    <p>{{ $webUrl }}</p>
    <p>{{ $lisi }}</p>
    
    <!-- 前后端数据双向绑定 -->
    用户名：<input wire:model="webName">
</div>

由于前期做的做，这样修改后，就可以直接通过路由来访问了。

第二步：路由访问

相关属性

双向绑定解释

1）数据双向绑定之后，在表单中修改数据，那么对应的 <p>{{$webName}}</p>所显示的数据同时发生了变化；

2）数据双向绑定后，每一个字，都会向后端发送一次请求。这一点可以打开控制台进行观察。

lazy惰性请求

// livewire/sutdy-list.blade.php
<div>
    <!-- 前后端数据双向绑定 -->
    用户名：<input wire:model.lazy="webName">
</div>

lazy只当鼠标离开输入框才会发送请求。

debounce延时提交

// livewire/sutdy-list.blade.php
<div>
    <!-- 前后端数据双向绑定 -->
    用户名：<input wire:debounce.2s="webName">
</div>

debounce只要数据发生改变后，2秒后才执行对应的修改。

defer延迟交互

defer点击提交后才触发

// livewire/sutdy-list.blade.php
<div>
    <!-- 前后端数据双向绑定 -->
    用户名：<input wire:defer="webName">
</div>

我是温新

每天进步一点点，就一点