Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Day5: Svelte 生命週期方法

Kalan
September 14, 2020

Day5: Svelte 生命週期方法

Svelte 元件當中有各式各樣的生命週期方法,可以在各個時間點呼叫達到不同功能。

Kalan

September 14, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

Transcript

  1. 第 12 屆 IT 鐵⼈賽
    30 天從 0 到 1 學 Svelte
    Day5 - ⽣命週期⽅法

    View Slide

  2. 第 12 屆 IT 鐵⼈賽
    本⽇⽬標
    學習 Svelte 當中的⽣命週期⽅法

    View Slide

  3. 第 12 屆 IT 鐵⼈賽
    ⽣命週期執⾏順序
    初始化:beforeUpdate → onMount → afterUpdate
    元件更新:beforeUpdate → afterUpdate
    元件銷毀:onDestroy

    View Slide

  4. 第 12 屆 IT 鐵⼈賽
    ⽣命週期概覽
    onMount, beforeUpdate, afterUpdate, onDestroy, tick

    View Slide

  5. 第 12 屆 IT 鐵⼈賽
    onMount
    在 Svelte 元件掛載時呼叫
    onMount 函數不會在 SSR 呼叫
    如果有回傳函式,會在
    unmount 時呼叫

    View Slide

  6. 第 12 屆 IT 鐵⼈賽
    beforeUpdate
    在狀態更新後,元件更新前執⾏
    會在 onMount 之前執⾏(初始化時)

    View Slide

  7. 第 12 屆 IT 鐵⼈賽
    afterUpdate
    狀態更新後,元件更新後執⾏

    View Slide

  8. 第 12 屆 IT 鐵⼈賽
    onDestroy
    元件銷毀時執⾏

    View Slide