Svelte onMount

每个组件都有一个生命周期，从创建时开始，到销毁时结束。有一些函数允许您在生命周期的关键时刻运行代码。

您最常使用的是 ​onMount​，它在组件首次呈现到 DOM 后运行。当我们需要在渲染后与 ​<canvas>​ 元素交互时，我们之前曾短暂地遇到过它。

我们将添加一个 ​onMount​ 处理程序，通过网络加载一些数据：

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

由于服务器端渲染（SSR）的原因，建议将 ​fetch​放在​onMount​，而不是放在​<script>​的顶层。除了​onDestroy​之外，生命周期函数在 SSR 期间不运行，这意味着我们可以避免获取那些一旦组件被加载到 DOM 中就应该被延迟加载的数据。

生命周期函数必须在组件初始化时调用，以便回调绑定到组件实例——而不是（比如）在 ​setTimeout​ 中。

如果 ​onMount​ 回调返回一个函数，则该函数将在组件被销毁时调用。