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 () => {
 // 在組件渲染後執行某些操作
 })
</script>

onDestroy 允許我們清理數據或停止在組件初始化時開始的任何操作，比如使用 setInterval 設置的計時器或定期執行的函數。

需要注意的是，如果我們從 onMount 返回一個函數，那麼它的功能與 onDestroy 相同 - 當組件被銷毀時運行該函數：

<script>
 import { onMount } from 'svelte'

 onMount(async () => {
 // 在組件渲染後執行某些操作

 return () => {
 // 在組件被銷毀時執行某些操作
 }
 })
</script>

下面是一個實際示例，它在組件渲染後設置一個定期執行的函數，並在組件被銷毀時刪除該函數：

<script>
 import { onMount } from 'svelte'

 onMount(async () => {
 const interval = setInterval(() => {
 console.log('嘿，這裡只是檢查一下！')
 }, 1000)

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