深く掘り下げたスクリーンキャストがある、Livewireに驚いてください。観る（英語版）
クラスのフック
各Livewireコンポーネントにはライフサイクルがあります。ライフサイクルフックを使用すると、コンポーネントのライフサイクルの任意の部分で、または特定のプロパティが更新される前にコードを実行できます。
| フック 説明 | |
|---|---|
| mount | コンポーネントがインスタンス化された直後、ただしrender()が呼び出される前に１回実行します |
| hydrate | コンポーネントがハイドレイトされた後、アクションが実行される前、またはrender()が呼び出される前に、すべてのリクエストで実行します |
| hydrateFoo | 名前が$fooのプロパティがハイドレイトされる後に実行します |
| dehydrate | コンポーネントがデハイドレイトされる前、render()が呼び出された後に、すべてのリクエストで実行します |
| dehydrateFoo | 名前が$fooのプロパティがデハイドレイトされる前に実行します |
| updating | Livewireコンポーネントのデータが更新される前に実行します（PHP内ではなく、wire:modelを使用） |
| updated | Livewireコンポーネントのデータが更新された後に実行します（PHP内ではなく、wire:modelを使用） |
| updatingFoo | 名前が$fooのプロパティが更新される前に実行します |
| updatedFoo | 名前が$fooのプロパティが更新された後に実行されます |
| updatingFooBar | $fooプロパティのネストしたプロパティbarを更新する前に実行します |
| updatedFooBar | $fooプロパティのネストしたプロパティbarを更新した後に実行します |
class HelloWorld extends Component
{
public $foo;
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>