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

Day5: Svelte 生命週期方法

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
400
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
Avatar for Kalan kjj6198
0
220
状態管理を楽にする道
Avatar for Kalan kjj6198
1
430
Day25. 如何解析 HTML 語法
Avatar for Kalan kjj6198
0
180
Day24. Svelte 如何編譯程式碼（2）
Avatar for Kalan kjj6198
0
230
Svelte 如何編譯程式碼（1）
Avatar for Kalan kjj6198
0
240
Day22. Svelte 經驗談
Avatar for Kalan kjj6198
0
210
Day18. UI 實戰篇 - 圖片檢視器
Avatar for Kalan kjj6198
0
200

Other Decks in Programming

See All in Programming
Contextとはなにか
Avatar for chiroruxx chiroruxx
0
280
AIエージェントの隔離技術の徹底比較
Avatar for kawayu kawayu
0
470
Spec-Driven Development with AI-Agents: From High-Level Requirements to Working Software
Avatar for Anton Arhipov antonarhipov
2
480
DynamoDBには集計系のクエリがないけどなんとかしたい
Avatar for 村上優稀 musan
1
130
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
330
LLM Plugin for Node-REDの利用方法と開発について
Avatar for 404background 404background
0
170
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
910
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
680
AIとRubyの静的型付け
Avatar for ukin0k0 ukin0k0
0
560
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
Avatar for doriven d0riven
0
320
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
230
The ROI of Quarkus for Spring Boot Applications
Avatar for Holly Cummins hollycummins
0
100

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
400
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
560
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
360
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
420
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
860
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
250
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
490
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
220
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k

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