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