Livewire 有可以讓開發者在元件的各個生命週期階段撰寫 code,可以參考以下列表:
Hooks | Description |
---|---|
boot | Runs on every request, immediately after the component is instantiated, but before any other lifecycle methods are called |
mount | Runs once, immediately after the component is instantiated, but before render() is called |
hydrate | Runs on every subsequent request, after the component is hydrated, but before an action is performed, or render() is called |
hydrateFoo | Runs after a property called $foo is hydrated |
dehydrate | Runs on every subsequent request, before the component is dehydrated, but after render() is called |
dehydrateFoo | Runs before a property called $foo is dehydrated |
updating | Runs before any update to the Livewire component's data (Using wire:model , not directly inside PHP) |
updated | Runs after any update to the Livewire component's data (Using wire:model , not directly inside PHP) |
updatingFoo | Runs before a property called $foo is updated. Array properties have an additional $key argument passed to this function to specify changing element inside array, like updatingArray($value, $key) |
updatedFoo | Runs after a property called $foo is updated. Array properties have additional $key argument as above |
updatingFooBar | Runs before updating a nested property bar on the $foo property or a multiword property such as $fooBar or $foo_bar |
updatedFooBar | Runs after updating a nested property bar on the $foo property or a multiword property such as $fooBar or $foo_bar |
在 component 內
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($name, $value) { // } public function updated($name, $value) { // } public function updatingFoo($value) { // } public function updatedFoo($value) { // } public function updatingFooBar($value) { // } public function updatedFooBar($value) { // } }
javascript hooks:
Called after Livewire removes an element during its DOM-diffing cycle | |
message.sent | Called when a Livewire update triggers a message sent to the server via AJAX |
message.failed | Called if the message send fails for some reason |
message.received | Called when a message has finished its roudtrip, but before Livewire updates the DOM |
message.processed | Called after Livewire processes all side effects (including DOM-diffing) from a message |
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) => {}) });