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

如何在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>

这里有一个实际的例子，它设置了一个周期性的函数在挂载时运行，并在销毁时删除。

<script>
  import { onMount } from 'svelte'

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

    return () => {
      clearInterval(interval)
    }
  })
</script>