在 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 所以当我有用到时再写篇文章跟大家分享吧！！