Жизненный цикл

У каждого компонента есть жизненный цикл, который начинается при его создании и заканчивается когда он уничтожается. Существует несколько функций, позволяющих запускать код в нужные моменты этого жизненного цикла.

Наиболее часто используемой является 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 возвращается функция, то эта функция будет вызвана при уничтожении компонента.