/

Svelte 生命周期事件

Svelte 生命周期事件

如何使用 Svelte 的生命周期事件

Svelte 中的每個組件都會觸發幾個生命周期事件，我們可以在其中進行操作，以實現我們想要的功能。

具體而言，我們有

  • onMount - 在組件渲染後觸發
  • onDestroy - 在組件被銷毀後觸發
  • beforeUpdate - 在 DOM 更新之前觸發
  • afterUpdate - 在 DOM 更新後觸發

我們可以通過 Svelte 觸發這些事件時安排執行特定的函數。

默認情況下，我們無法直接訪問這些方法，但是我們可以從 svelte 包中導入它們：

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

onMount 的常見用法是從其他源獲取數據。

以下是使用 onMount 的示例：

1
2
3
4
5
6
7
<script>
 import { onMount } from 'svelte'

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

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

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

1
2
3
4
5
6
7
8
9
10
11
<script>
 import { onMount } from 'svelte'

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
 import { onMount } from 'svelte'

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

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

tags: [“lifecycle events”, “Svelte”, “onMount”, “onDestroy”, “beforeUpdate”, “afterUpdate”]