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

Day5: Svelte 生命週期方法

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Kalan Kalan
September 14, 2020
Programming
120
0

Day5: Svelte 生命週期方法

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

Avatar for Kalan

Kalan

September 14, 2020

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
JAWS-UG横浜 #102 AWSサ終供養LT会 成仏できない AWS サービスたち 〜本日、三体供養します〜
Avatar for maroon1st maroon1st
0
240
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
Avatar for Kenji Kono konokenj
3
660
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
1
230
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
420
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
Avatar for petamoriken / 森建 petamoriken
0
180
20260722_microCMSで考える、AI時代のコンテンツ運用設計
Avatar for Yoshihisa Kaino yosh1
0
120
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
440
関数型プログラミングのメリットって何だろう？
Avatar for わんこ(Wanko_IT) wanko_it
0
200
初めてのKubernetes 本番運用でハマった話
Avatar for Kobujee_53 oku053
0
130
これからAgentCoreを触る方へ トレンドはGatewayです
Avatar for Har1101 har1101
6
510
AI駆動開発を妨げる技術的負債の解消アプローチ / ai-refactoring-approach
Avatar for MinoDriven minodriven
17
9.4k
AIエージェントで 変わるAndroid開発環境
Avatar for takahirom takahirom
2
720

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
600
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
240
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
550
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.9k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Visualization
Avatar for Eitan Lees eitanlees
152
17k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
450
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
280

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 元件銷毀時執⾏