苗条的生命周期事件

如何在Svelte中使用生命周期事件

Svelte中的每个组件都会触发多个生命周期事件,我们可以将其挂钩,以帮助我们实现所想到的功能。

特别是,我们有

  • onMount渲染组件后触发
  • onDestroy组件销毁后触发
  • beforeUpdate在DOM更新之前触发
  • afterUpdate在DOM更新后触发

我们可以安排函数在Svelte触发这些事件时发生。

默认情况下,我们无权访问任何这些方法,但是我们可以从svelte包裹:

<script>
  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte'
</script>

常见的情况onMount是从其他来源获取数据。

这是一个示例用法onMount

<script>
  import { onMount } from 'svelte'

onMount(async () => { //do something on mount }) </script>

onDestroy允许我们清理数据或停止在组件初始化时可能已经开始的任何操作,例如使用计时器或计划的定期函数setInterval

需要注意的一件事是,如果我们从onMount,其功能与onDestroy-在组件销毁时运行:

<script>
  import { onMount } from 'svelte'

onMount(async () => { //do something on mount return () => { //do something on destroy } }) </script>

这是一个实际的示例,该示例将周期函数设置为在mount上运行,并在destroy上将其删除:

<script>
  import { onMount } from 'svelte'

onMount(async () => { const interval = setInterval(() => { console.log(‘hey, just checking!’) }, 1000)

<span style="color:#66d9ef">return</span> () =&gt; {
  <span style="color:#a6e22e">clearInterval</span>(<span style="color:#a6e22e">interval</span>)
}

}) </script>

免费下载我的苗条手册


更多精妙的教程: