Svelte onMount

2023-02-21 15:14 更新

每个组件都有一个生命周期,从创建时开始,到销毁时结束。有一些函数允许您在生命周期的关键时刻运行代码。

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号