作者：温新

时间：2021-08-14

hi，我是温新，一名PHPer

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

2）使用Livewire2.x版本

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

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

wire:model双向绑定

第一步：修改组件模板

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

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// livewire/sutdy-list.blade.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">我是livewire组件</span><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">wire</span>:<span style="box-sizing: border-box;color: rgb(130, 177, 255)">click</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"getWebName"</span><span style="box-sizing: border-box">></span>{{ <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$webName</span> }}<span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span>{{ <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$webUrl</span> }}<span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span>{{ <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$lisi</span> }}<span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">p</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><!--</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">前后端数据双向绑定</span> <span style="box-sizing: border-box">--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(130, 177, 255)">用户名：</span><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">input</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">wire</span>:<span style="box-sizing: border-box;color: rgb(130, 177, 255)">model</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"webName"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span>

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

第二步：路由访问

相关属性

双向绑定解释

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

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

lazy惰性请求

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// livewire/sutdy-list.blade.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><!--</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">前后端数据双向绑定</span> <span style="box-sizing: border-box">--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(130, 177, 255)">用户名：</span><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">input</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">wire</span>:<span style="box-sizing: border-box;color: rgb(130, 177, 255)">model</span>.<span style="box-sizing: border-box;color: rgb(130, 177, 255)">lazy</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"webName"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span>

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

debounce延时提交

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// livewire/sutdy-list.blade.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><!--</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">前后端数据双向绑定</span> <span style="box-sizing: border-box">--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(130, 177, 255)">用户名：</span><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">input</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">wire</span>:<span style="box-sizing: border-box;color: rgb(130, 177, 255)">debounce</span>.<span style="box-sizing: border-box;color: rgb(247, 118, 105)">2</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">s</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"webName"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span>

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

defer延迟交互

defer点击提交后才触发

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// livewire/sutdy-list.blade.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><!--</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">前后端数据双向绑定</span> <span style="box-sizing: border-box">--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(130, 177, 255)">用户名：</span><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">input</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">wire</span>:<span style="box-sizing: border-box;color: rgb(130, 177, 255)">defer</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"webName"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span>

我是温新

每天进步一点点，就一点