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

Day5: Svelte 生命週期方法

Avatar for Kalan Kalan
September 14, 2020
Programming
0
110

Day5: Svelte 生命週期方法

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

Avatar for Kalan

Kalan

September 14, 2020
Tweet

More Decks by Kalan

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

Other Decks in Programming

See All in Programming
釣り地図SNSにおける有料機能の実装
Avatar for nokonoko1203 nokonoko1203
0
200
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
Avatar for 入井 啓太 iriikeita
0
320
Flutterで分数(Fraction)を表示する方法
Avatar for kouki.miura koukimiura
0
140
CSC509 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
Writing Better Go: Lessons from 10 Code Reviews
Avatar for Konrad Reiche konradreiche
3
6k
あなたとKaigi on Rails / Kaigi on Rails + You
Avatar for Hiroshi Shimoju shimoju
0
180
Webサーバーサイド言語としてのRustについて
Avatar for kaza kouyuume
1
4.3k
One Enishi After Another
Avatar for Koji SHIMADA snoozer05
PRO
0
150
NIKKEI Tech Talk#38
Avatar for cipepser cipepser
0
140
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
Avatar for N Akita nakita628
0
310
Devvox Belgium - Agentic AI Patterns
Avatar for Kevin Dubois kdubois
1
140
Vueのバリデーション、結局どれを選べばいい？ ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
Avatar for ねぎなす neginasu
2
490

Featured

See All Featured
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
49
51k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
930
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.5k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Building an army of robots
Avatar for Kyle Neath kneath
305
46k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k

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