· SvelteonMount_Svelte

Svelte onMount

每个组件都有一个生命周期，从创建时开始，到销毁时结束。有一些函数允许您在生命周期的关键时刻运行代码。您最常使用的是 onMount，它在组件首次呈现到 DOM 后运行。当我们需要在渲染后与 <canvas> 元素交互时，我们之前曾短暂地遇到过它。我们将添加一个 onMount 处理程序，通过网络加载一些数据：<script>

import { onMount } from 'svelte';

let photos = [];
onMount(async () =&gt; {
    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 回调返回一个函数，则该函数将在组件被销毁时调用。