深く掘り下げたスクリーンキャストがある、Livewireに驚いてください。観る(英語版)
クラスのフック
各Livewireコンポーネントにはライフサイクルがあります。ライフサイクルフックを使用すると、コンポーネントのライフサイクルの任意の部分で、または特定のプロパティが更新される前にコードを実行できます。
フック | 説明 |
---|---|
mount | コンポーネントがインスタンス化された直後、ただしrender() が呼び出される前に1回実行します |
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($name, $value)
{
//
}
public function updated($name, $value)
{
//
}
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>