iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!系列 第 9

Day 09 | Livewire 生命週期勾 Lifecycle Hooks

在 Vue.js 有的生命週期在 Livewire 中也都有,除此之外在 Livewire 中各自變數也有各自的生命週期,讓你能更方便的對各個變數週期事件單獨做操作。

以下就來看看有哪些吧:

Hooks 敘述
mount 在元件選染完成後只會執行一次,且執行在 render() 之前。
hydrate 每個請求時都會執行一次。
hydrateFoo 同上,但只限 $foo 呼叫後後執行。
dehydrate 每個請求時都會執行一次。
dehydrateFoo 同上,但只限 $foo 呼叫後後執行。
updating 當透過 wire:model 進行更改之前執行。
updated 當透過 wire:model 進行更改之後執行。
updatingFoo 跟上面updating一樣但只限更改 $foo 前執行。
updatedFoo 跟上面updated一樣但只限更改 $foo 後執行。
updatingFooBar 跟上面updating一樣但這邊能監聽裡數個變數,在更改 $fooBar或是$foo_bar 前執行。
updatedFooBar 跟上面updating一樣但這邊能監聽裡數個變數,在更改 $fooBar或是$foo_bar 後執行。

備註:dehydrate 是在 Livewire v2 才有的新東西。原先 hydrate 的功能是處理每個請求,包含 wire:click 透過 function 去修改變數時都能執行。但到了 Livewire v2 則分成了 hydratedehydrate。其中的差異則在 hydrate 是 Livewire 在將 JS 轉至 PHP 時觸發執行,而 dehydrate 則是 PHP 轉 JS 時執行。

參考自: https://stackoverflow.com/questions/65500135/what-does-it-mean-to-hydrate-and-dehydrate-a-laravel-livewire-component


實際操作

這邊我宣告了三個計數器,分別放置於對應的生命週期鉤子hydrate,dehydrate,updated中。好來顯示我們做哪些事情會使其被觸發。而在前端頁面也分別顯示了這三個變數,並多用了一個$title來透過按鈕觸發 function 去更改,以及直接在 <input> 中用 wire:model($title) 的方式來看看分別會觸發哪些值。

可以到 DEMO 頁面來玩玩看!

<?php

namespace App\Http\Livewire\Example;

use Livewire\Component;

class Day9 extends Component
{
    public $counter_hydrate = 0;
    public $counter_dehydrate = 0;
    public $counter_updated = 0;
    public $title = 'init';

    public function mount()
    {
        $this->title = 'Hello World';
    }

    public function render()
    {
        return view('livewire.example.day9');
    }

    public function hydrate()
    {
        $this->counter_hydrate++;
    }

    public function dehydrate()
    {
        $this->counter_dehydrate++;
    }

    public function updated()
    {
        $this->counter_updated++;
    }

    // 以下為自訂函式

    public function updateTitle($newText)
    {
        // 透過按鈕觸發,因為不是透過 wire:model 去修改,所以不會觸發 updated
        $this->title = $newText;
    }
}
<div class="text-center">
    <h2>Day9: Lifecycle Hooks</h2>
    <h3>{{ $title }}</h3>
    <h5>hydrate counter: {{ $counter_hydrate }}</h5>
    <h5>dehydrate counter: {{ $counter_dehydrate }}</h5>
    <h5>updated counter: {{ $counter_updated }}</h5>

    <button class="ui button" wire:click="updateTitle('嗨嗨')">UpdateTitle</button>

    <div class="ui input">
      <input type="text" wire:model="title">
    </div>
</div>

updated

最後能夠發現,updated 只有在 <input> 中的 wire:model() 所產生的變動會有反應。透過按鈕觸發 wire:click() 再由後端直接賦予數值的則不會觸發 update。這邊就與 Vue.js 的 updatedbeforeUpdate 有所差異。

hydrate

hydratedehydrate,在每個 請求 都會被觸發到,即便是沒有造成值的變動都會觸發。

只要有從前端送請求到後端都會觸發

雖然無法從這個範例觀察到 hydratedehydrate 的差異,但我使用 Livewire 寫了幾個專案也沒有用到 hydratedehydrate 所以當我有用到時再寫篇文章跟大家分享吧!!


上一篇
Day 08 | 觸發事件
下一篇
Day 10 | 嵌套元件(一)
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34

尚未有邦友留言

立即登入留言