生命周期钩子

2.x

3.x 2.x 1.x

Livewire 中文文档 /

生命周期钩子

组件类钩子
Javascript 钩子

组件类钩子

每个 Livewire 组件都会经历一个生命周期。生命周期钩子允许您在组件生命周期的任何部分或在更新特定属性之前运行代码。

钩子	描述
boot	在每次请求时运行，在组件实例化之后，任何其他生命周期方法被调用之前立即运行。
booted	在每次请求时运行，在组件 `mount` 或 `hydrate` 之后，任何 `update` 方法被调用之前。
mount	仅运行一次，在实例化组件之后， `render()` 方法被调用之前立即运行。此方法仅在页面初始化时调用，此后即使组件刷新也不会被再次调用。
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	在对 Livewire 组件数据进行任何更新之前运行
updated	在对 Livewire 组件的数据进行任何更新之后运行
updatingFoo	在名为 `$foo` 的属性更新之前运行
updatedFoo	在名为 `$foo` 的属性更新之后运行
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`

请注意，直接在 Livewire 组件类中修改属性不会触发任何 updating/updated 钩子。

class HelloWorld extends Component
{
    public $foo;

    public function boot()
    {
        //
    }

    public function booted()
    {
        //
    }

    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	Called when a component has been initialized on the page by Livewire
element.initialized	Called when Livewire initializes an individual element
element.updating	Called before Livewire updates an element during its DOM-diffing cycle after a network roundtrip
element.updated	Called after Livewire updates an element during its DOM-diffing cycle after a network roundtrip
element.removed	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

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