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

Day5: Svelte 生命週期方法

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
240
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
PHP Application における Kubernetes 内 gRPC 通信
Avatar for Shin Ohno ganchiku
0
590
KotlinConf Extended South Korea 2026 Keynote
Avatar for HyunWoo Lee l2hyunwoo
0
110
OpenSpecのproposalにbrainstormingを持たせてみた
Avatar for Toranosuke Minamikawa tigertora7571
1
240
メールのエイリアス機能を履き違えない
Avatar for 船長（せんちょう） isshinfunada
0
240
Flow は今どうなっているか
Avatar for mizdra mizdra
PRO
0
590
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
Avatar for dachi dachi023
0
610
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
700
「寝てても仕事が進む」Claude Codeで組む第二の脳
Avatar for t-fujita24 tomoyafujita2016
0
340
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
1.8k
楽しそうなつよつよエンジニアと目が死んでる僕/A brilliant engineer having a blast, and dead-eyed me.
Avatar for Ryusei Ohkura 3l4l5
2
190
わからない話を追いかけたら、プログラミング言語を作る側にいた
Avatar for ydah ydah
3
520
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
Avatar for endo shiki shiki_kakaku
0
1.8k

Featured

See All Featured
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
How to make the Groovebox
Avatar for あそなす asonas
2
2.3k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
108
250k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.4k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k
Done Done
Avatar for chrislema chrislema
186
16k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.5k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
550

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