У каждого компонента есть жизненный цикл, который начинается при его создании и заканчивается когда он уничтожается. Существует несколько функций, позволяющих запускать код в нужные моменты этого жизненного цикла.
Наиболее часто используемой является onMount, которая запускается сразу после первой отрисовки компонента в DOM. Мы уже встречались с ней ранее, когда нам нужно было взаимодействовать с элементом <canvas> после его рендеринга.
Давайте добавим обработчик onMount, который загружает некоторые данные из сети:
<script>import{ onMount }from'svelte';let photos =[];onMount(async()=>{const res =awaitfetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
photos =await res.json();});</script>
При использовании рендеринга на стороне сервера (SSR) рекомендуется помещать fetch в onMount, а не на верхний уровень блока <script>. Функции жизненного цикла, кроме onDestroy, не выполняются во время SSR, поэтому на сервере не будет тратиться время на загрузку данных, которые должны 'лениво' загружаться после монтирования компонента в DOM.
Функции жизненного цикла должны вызываться во время инициализации компонента, чтобы их функции обратного вызова были привязаны к экземпляру этого компонента. Так что, нельзя ее вызывать, например, в setTimeout.
Если из onMount возвращается функция, то эта функция будет вызвана при уничтожении компонента.