codecamp

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


Svelte 组件绑定
Svelte onDestroy
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Svelte module context

Svelte 调试

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }