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
回调返回一个函数,则该函数将在组件被销毁时调用。