Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Day5: Svelte 生命週期方法

Avatar for Kalan Kalan
September 14, 2020
Programming
130
0

Day5: Svelte 生命週期方法

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

Avatar for Kalan

Kalan

September 14, 2020

More Decks by Kalan

See All by Kalan
單頁式應用中的無障礙設計
Avatar for Kalan kjj6198
0
860
選擇 Svelte 的三個理由 - JSDC
Avatar for Kalan kjj6198
0
460
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
260
状態管理を楽にする道
Avatar for Kalan kjj6198
1
470
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
220
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
260
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
280
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
260
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
240

Other Decks in Programming

See All in Programming
月間100万人のサービス刷新で、 技術選定をHonoに振り切った話
Avatar for bara yutobara
8
6.3k
Domain-Driven Transformation
Avatar for Henning Schwentner hschwentner
2
2.3k
複雑なUIコンポーネントとの ⻑い付き合い⽅：波及するバグからテスト戦略を経て、安全な再設計へ
Avatar for masahiko.asai mixplace
0
380
Androidだけじゃない、DroidKaigiで広がった私の技術スタック
Avatar for Akio Itaya akkeylab
0
130
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
1
2.3k
ジョジョの世界をXRで再現する
Avatar for mofurune mofurune
0
150
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
770
TechTown - Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
100
Simple Storage Service(S3) is not simple
Avatar for Yura Iwatsuka iwatsukayura
0
270
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
150
Ghostty + Neovimで作る 透明でカッコ良い開発環境
Avatar for Kanade Nonomura j341nono
0
170
Are APIs Still Relevant in the AI Era?
Avatar for Antoine Bluchet soyuka
0
460

Featured

See All Featured
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.4k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
570
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
900
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
620
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.7k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day5 - ⽣命週期⽅法

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

  3. 第 12 屆 IT 鐵⼈賽 ⽣命週期執⾏順序 初始化：beforeUpdate → onMount →

    afterUpdate 元件更新：beforeUpdate → afterUpdate 元件銷毀：onDestroy

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

    tick

  5. 第 12 屆 IT 鐵⼈賽 onMount 在 Svelte 元件掛載時呼叫 onMount

    函數不會在 SSR 呼叫 如果有回傳函式，會在 unmount 時呼叫

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

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

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