[Livewire] 生命週期(Lifecycle Hooks)

2021-09-17 10:33:06

Livewire 有可以讓開發者在元件的各個生命週期階段撰寫 code，可以參考以下列表：

Hooks	Description
boot	Runs on every request, immediately after the component is instantiated, but before any other lifecycle methods are called
mount	Runs once, immediately after the component is instantiated, but before `render()` is called
hydrate	Runs on every subsequent request, after the component is hydrated, but before an action is performed, or `render()` is called
hydrateFoo	Runs after a property called `$foo` is hydrated
dehydrate	Runs on every subsequent request, before the component is dehydrated, but after `render()` is called
dehydrateFoo	Runs before a property called `$foo` is dehydrated
updating	Runs before any update to the Livewire component's data (Using `wire:model`, not directly inside PHP)
updated	Runs after any update to the Livewire component's data (Using `wire:model`, not directly inside PHP)
updatingFoo	Runs before a property called `$foo` is updated. Array properties have an additional `$key` argument passed to this function to specify changing element inside array, like `updatingArray($value, $key)`
updatedFoo	Runs after a property called `$foo` is updated. Array properties have additional `$key` argument as above
updatingFooBar	Runs before updating a nested property `bar` on the `$foo` property or a multiword property such as `$fooBar` or `$foo_bar`
updatedFooBar	Runs after updating a nested property `bar` on the `$foo` property or a multiword property such as `$fooBar` or `$foo_bar`

在 component 內

class HelloWorld extends Component

{

    public $foo;

 

    public function boot()

    {

        //

    }

 

    public function mount()

    {

        //

    }

 

    public function hydrateFoo($value)

    {

        //

    }

 

    public function dehydrateFoo($value)

    {

        //

    }

 

    public function hydrate()

    {

        //

    }

 

    public function dehydrate()

    {

        //

    }

 

    public function updating($name, $value)

    {

        //

    }

 

    public function updated($name, $value)

    {

        //

    }

 

    public function updatingFoo($value)

    {

        //

    }

 

    public function updatedFoo($value)

    {

        //

    }

 

    public function updatingFooBar($value)

    {

        //

    }

 

    public function updatedFooBar($value)

    {

        //

    }

}

javascript hooks：

Called after Livewire removes an element during its DOM-diffing cycle
message.sent	Called when a Livewire update triggers a message sent to the server via AJAX
message.failed	Called if the message send fails for some reason
message.received	Called when a message has finished its roudtrip, but before Livewire updates the DOM
message.processed	Called after Livewire processes all side effects (including DOM-diffing) from a message

document.addEventListener("DOMContentLoaded", () => {

        Livewire.hook('component.initialized', (component) => {})

        Livewire.hook('element.initialized', (el, component) => {})

        Livewire.hook('element.updating', (fromEl, toEl, component) => {})

        Livewire.hook('element.updated', (el, component) => {})

        Livewire.hook('element.removed', (el, component) => {})

        Livewire.hook('message.sent', (message, component) => {})

        Livewire.hook('message.failed', (message, component) => {})

        Livewire.hook('message.received', (message, component) => {})

        Livewire.hook('message.processed', (message, component) => {})

    });

原文：Livewire Lifecycle Hooks