Svelte onMount

每個(gè)組件都有一個(gè)生命周期，從創(chuàng)建時(shí)開始，到銷毀時(shí)結(jié)束。有一些函數(shù)允許您在生命周期的關(guān)鍵時(shí)刻運(yùn)行代碼。

您最常使用的是 ?onMount?，它在組件首次呈現(xiàn)到 DOM 后運(yùn)行。當(dāng)我們需要在渲染后與 ?<canvas>? 元素交互時(shí)，我們之前曾短暫地遇到過它。

我們將添加一個(gè) ?onMount? 處理程序，通過網(wǎng)絡(luò)加載一些數(shù)據(jù)：

<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>

由于服務(wù)器端渲染（SSR）的原因，建議將 ?fetch?放在?onMount?，而不是放在?<script>?的頂層。除了?onDestroy?之外，生命周期函數(shù)在 SSR 期間不運(yùn)行，這意味著我們可以避免獲取那些一旦組件被加載到 DOM 中就應(yīng)該被延遲加載的數(shù)據(jù)。

生命周期函數(shù)必須在組件初始化時(shí)調(diào)用，以便回調(diào)綁定到組件實(shí)例——而不是（比如）在 ?setTimeout? 中。

如果 ?onMount? 回調(diào)返回一個(gè)函數(shù)，則該函數(shù)將在組件被銷毀時(shí)調(diào)用。