在Svelte中監聽導出屬性的變化

423字
2分鐘
2024-08-18
- Svelte

在Svelte中，監聽導出屬性的變化並執行相應的函數是一個常見需求。在這篇文章中，我們將介紹如何通過響應式聲明和鉤子函數來實現這一功能。

1. 使用 `$:` 響應式語法

Svelte 的 $: 聲明非常強大，可以在導出屬性發生變化時自動運行代碼。例如，假設我們有一個導出的 value 屬性，我們希望在每次 value 變化時執行相應的函數：

1
<script>
2
  export let value;
3

4
  // 響應式聲明，當 `value` 發生變化時執行此塊
5
  $: valueChanged(value);
6

7
  function valueChanged(newValue) {
8
    console.log('Value changed to:', newValue);
9
  }
10
</script>
11

12
<p>{value}</p>

在這個例子中，每當 value 發生變化時，valueChanged 函數會被調用，並記錄新的值。這種方式直觀且易於使用，特別適合處理簡單的屬性監聽場景。

2. 使用 `beforeUpdate` 鉤子函數

如果你需要在組件更新之前進行更複雜的邏輯控制，比如只在某些條件滿足時觸發函數，可以使用 beforeUpdate 鉤子函數。下面是一個實現示例：

1
<script>
2
  import { beforeUpdate } from 'svelte';
3

4
  export let value;
5

6
  let previousValue;
7

8
  beforeUpdate(() => {
9
    if (previousValue !== value) {
10
      valueChanged(value);
11
      previousValue = value;
12
    }
13
  });
14

15
  function valueChanged(newValue) {
16
    console.log('Value changed to:', newValue);
17
  }
18
</script>
19

20
<p>{value}</p>