iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
1
Modern Web

前端工程的另一個選擇 Svelte 系列 第 17

DAY17- 元件的生命週期

  • 分享至 

  • xImage
  •  

svelte component lifecycle

svelte component lifecycle 是今天要分享的主題,在分享svelte的複合式元件 slot開始要分享一些進階的內容,今天的內容先從生命週期開始。

本文同步放置於此

生命週期跟開發有甚麼關係

通常要說明這類主題時,讀者們都會問生命週期跟我們有甚麼關係,試想一下,如果有些事情在載入元件時要執行一次要如何處理,或者又有些註冊的事件在結束時要取消註冊又該如何處理,還有這些生命週期的順序是怎麼樣排列的,諸如此類的問題都是進一步開發時會遇到的問題,今天這個主題就來說明一下svelte 元件的生命週期,以及如何撰寫事件處理。

svelte component lifecycle 有哪些

今天分享的內容會說明常用的svelte元件的生命週期有哪些,還有如何使用,若是有興趣了解其他未提及的生命週期事件的朋友可以看一下svelte api文件,所以我們先從掛載元件的事件開始介紹。

onMount

這是所有元件開始的第一步,當所有的元件被載入時都會先進入這個事件當中,所以在這裡就可以去執行fetch載入設定檔之類的動作。

beforeUpdate

這是元件開始更新時會進入的事件,所以可以放一些權限檢查的邏輯,如此可以確定使用者能訪問這個頁面。

afterUpdate

這是元件更新後的事件,透過這事件可以來設定資料面的部份。

onDestroy

最後當離開這元件時都會呼叫這個事件,所以可以在這裡做一些釋放註冊的動作。

svelte component lifecycle 該怎麼用呢

介紹完常用的事件後,接下來就說明一下該怎麼使用,我們就拿onMount要載入資料為例子,請大家先看一下下面的程式碼。

<script>
	let photos = [];
</script>

<style>
	.photos {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 8px;
	}

	figure, img {
		width: 100%;
		margin: 0;
	}
</style>

<h1>Photo album</h1>

<div class="photos">
	{#each photos as photo}
		<figure>
			<img src={photo.thumbnailUrl} alt={photo.title}>
			<figcaption>{photo.title}</figcaption>
		</figure>
	{:else}
		<!-- this block renders when photos.length === 0 -->
		<p>loading...</p>
	{/each}
</div>

這是一個顯示圖片的基礎框架,大家可以到svelte tutorial onmount實際操作一下,但是這例子還沒寫完,因為沒有地方取的照片資料,所以這邊我們要去呼叫API取得照片相關資訊,所以我們修改一下例子,請大家看看修改後的結果。

<script>
	import { onMount } from 'svelte';

	let photos = [];

	onMount(async () => {
		const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
		photos = await res.json();
	});
</script>

<style>
	.photos {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 8px;
	}

	figure, img {
		width: 100%;
		margin: 0;
	}
</style>

<h1>Photo album</h1>

<div class="photos">
	{#each photos as photo}
		<figure>
			<img src={photo.thumbnailUrl} alt={photo.title}>
			<figcaption>{photo.title}</figcaption>
		</figure>
	{:else}
		<!-- this block renders when photos.length === 0 -->
		<p>loading...</p>
	{/each}
</div>

這邊要注意的第一件事情是,使用lifecycle時要先從svelte import進來,這是我們第一次import,之後進階的內容會常常用到,再來這邊也可以搭配await做一個loading的顯示,就留給讀者們試試看了。

小結

今天介紹給大家 svelte component lifecycle 的種類以及用法,也作為進階內容的第一篇,希望大家會喜歡。


上一篇
DAY16- 插座的屬性
下一篇
DAY18- 唯讀的store
系列文
前端工程的另一個選擇 Svelte 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言