Laravel-Livewire笔记系列(九)-Livewire生命周期方法

作者：温新

时间：2021-08-14

hi，我是温新，一名PHPer

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

2）使用Livewire2.x版本

理解Livewire生命周期方法执行顺序。

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// app/Http/Livewire/LeaveMsgCreate.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><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)">php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><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(199, 146, 234)">namespace</span> <span style="box-sizing: border-box">App\Http\Livewire</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><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(199, 146, 234)">use</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Livewire\Component</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><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(199, 146, 234)">class</span> <span style="box-sizing: border-box">LeaveMsgCreate</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">extends</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Component</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;color: rgb(199, 146, 234)">public</span> <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$content</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><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><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 初始化方法</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">public</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> <span style="box-sizing: border-box">mount</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;color: rgb(128, 203, 196)">$this</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">content</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(195, 232, 141)">'自如初'</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><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 数据发送改变后调用</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">public</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> <span style="box-sizing: border-box">hydrate</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;color: rgb(130, 177, 255)">dump</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'hydreate'</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 196)">$this</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">content</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><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 数据修改前调用</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">public</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> <span style="box-sizing: border-box">updating</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;color: rgb(130, 177, 255)">dump</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'updating'</span> . <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$this</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">content</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><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 数据修改后调用</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">public</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> <span style="box-sizing: border-box">updated</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;color: rgb(130, 177, 255)">dump</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'updated'</span> . <span style="box-sizing: border-box;color: rgb(128, 203, 196)">$this</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">content</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><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 自定义属性</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">public</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> <span style="box-sizing: border-box">updatingContent</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;color: rgb(130, 177, 255)">dump</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'updateingContent'</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 196)">$this</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">content</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;color: rgb(84, 110, 122)">// 自定义属性</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">public</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> <span style="box-sizing: border-box">updatedContent</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;color: rgb(130, 177, 255)">dump</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'updatedContent'</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 196)">$this</span><span style="box-sizing: border-box">-></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">content</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><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 省略其它代码</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>

关于它们的执行顺序：

mount > hydrate > updating > updatingContent > updated > updatedContent

必须要登录哦~~

我是温新

每天进步一点点，就一点