[Livewire] 生命週期(Lifecycle Hooks)

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) => {})

    });

 

原文:Livewire Lifecycle Hooks

課程推薦

AI工作術全面學習實戰營:6 堂精選課程,學會最好用 AI 工具,翻轉你的人生

AI工作術全面學習實戰營:6 堂精選課程,學會最好用 AI 工具,翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師,打造上述 6 堂實用課程,教你學會時下最好用的 AI 工具,導入生成式 AI 來產製工作內容,改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上,同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學,加上 ChatGPT 的輔助,您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗,還會大幅提高網站的搜索引擎排名,進而增加訪客流量和潛在客戶。
用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

在快速變遷的職場中,提升競爭力成為關鍵。透過引領潮流的AI技術,ChatGPT和Midjourney將助您勇攀高峰。無論您是AI新手還是專家,這個課程將引導您從入門到精通,解密AI的奧秘,並學習如何運用於職場。
GitHub Copilot AI 程式碼編輯工具應用實務班

GitHub Copilot AI 程式碼編輯工具應用實務班

讓學員瞭解有效地使用該工具來加速開發流程、提高程式碼品質和生產力。課程重點放在以 JavaScript 程式語言為例,介紹 Copilot 的基本原理、使用方法和最佳實踐。

輸入折扣碼 TC1456JA 還可以額外獲得 NT$500 優惠喔。

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

掌握Clipchamp AI的操作技巧,靈活運用Clipchamp AI進行影片編輯和創作,實現創意表達和傳播目的。

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

Looker Studio除了可協助使用者監控網站流量、廣告成效、選擇匯入資源的管道之外,還可以將數據資料多平台整合、數據報表即時更新、數據範本可重複套用的效益,透過自動化系統,將數據全部匯入同一個報表平台,是企業不可或缺的重要工具。

輸入折扣碼 TC1270JIA 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。