{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>