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 的種類以及用法，也作為進階內容的第一篇，希望大家會喜歡。