Day5: Svelte 生命週期方法

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

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