[Livewire] 生命週期(Lifecycle Hooks)

分享:

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

課程推薦

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。