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

{video} 細かに説明したスクリーンキャストを用意している、Livewireに驚いてください

クラスのフック

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

フック 説明
boot コンポーネントがインスタンス化された直後、他のライフサイクル・メソッドが呼び出される前に、すべてのリクエストに対して実行します
mount コンポーネントがインスタンス化された直後、ただしrender()が呼び出される前に1回実行します
hydrate コンポーネントがハイドレイトされた後、アクションが実行される、またはrender()が呼び出される前に、後続のすべてのリクエストで実行します
hydrateFoo 名前が$fooのプロパティがハイドレイトされた後に実行します
dehydrate コンポーネントがデハイドレイトされる前、render()が呼び出された後に、後続のすべてのリクエストで実行します
dehydrateFoo 名前が$fooのプロパティがデハイドレイトされる前に実行します
updating Livewireコンポーネントのデータが更新される前に実行します(PHP内ではなく、wire:modelを使用)
updated Livewireコンポーネントのデータが更新された後に実行します(PHP内ではなく、wire:modelを使用)
updatingFoo 名前が$fooのプロパティが更新される前に実行します。配列プロパティでは、追加の$key引数があり、updatingArray($value, $key)の形式でこの関数へ渡し、配列内の変更する要素を指定できます
updatedFoo 名前が$fooのプロパティが更新された後に実行されます。前記のように、配列プロパティでは、追加の$key引数があります
updatingFooBar $fooプロパティのネストしたプロパティbarや、$fooBar$foo_barなどのマルチワードプロパティを更新する前に実行します
updatedFooBar $fooプロパティのネストしたプロパティbarや、$fooBar$foo_barなどのマルチワードプロパティを更新した後に実行します

なお、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を実行するタイミングを提供します。

フック 説明
component.initialized Livewireによりページ上のコンポーネントが初期化されたときに呼び出します
element.initialized Livewireが個々の要素を初期化するときに呼び出します
element.updating ネットワークラウンドトリップ後のDOM差分処理サイクル中に、Livewireが要素を更新する前に呼び出します。
element.updated ネットワークラウンドトリップ後のDOM差分処理サイクル中にLivewireが要素を更新した後に呼び出します。
element.removed LivewireがDOM差分処理サイクル中に要素を削除した後に呼び出します
message.sent Livewireによる更新がトリガーとなり、AJAXを介してサーバーにメッセージが送信されたときに呼び出します
message.failed メッセージの送信が何らかの理由で失敗した場合に呼び出します
message.received メッセージがラウンドトリップを終了し、LivewireがDOMを更新する前に呼び出します
message.processed Livewireがメッセージからのすべての副作用(DOM差分処理を含​​む)を処理した後に呼び出します
<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>

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

言語
バージョン

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる