Livewire 2.x ライフサイクルのフック

各Livewireコンポーネントにはライフサイクルがあります。ライフサイクルフックを使用すると、コンポーネントのライフサイクルの任意の部分で、または特定のプロパティが更新される前にコードを実行できます。

なお、Livewire のコンポーネントクラス内で直接プロパティを変更しても、更新/更新されたフックは作動しないことに注意してください。

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($value, $name)
    {
        //
    }

    public function updated($value, $name)
    {
        //
    }

    public function updatingFoo($value)
    {
        //
    }

    public function updatedFoo($value)
    {
        //
    }

    public function updatingFooBar($value)
    {
        //
    }

    public function updatedFooBar($value)
    {
        //
    }
}

Javascriptフック

Livewireは、特定のイベント中にjavascriptを実行するタイミングを提供します。

<script>
    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) => {})
    });
</script>