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

以下就來看看有哪些吧：

備註：dehydrate 是在 Livewire v2 才有的新東西。原先 hydrate 的功能是處理每個請求，包含 wire:click 透過 function 去修改變數時都能執行。但到了 Livewire v2 則分成了 hydrate 及 dehydrate 。其中的差異則在 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 的 updated 、 beforeUpdate 有所差異。

hydrate

而 hydrate 及 dehydrate，在每個 請求 都會被觸發到，即便是沒有造成值的變動都會觸發。

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

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