Svelte符文

$derived

衍生狀態使用 $derived 符文宣告

<script>
	let count = $state(0);
	let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
	{doubled}
</button>

<p>{count} doubled is {doubled}</p>

$derived(...) 內的表達式應避免副作用。Svelte 會禁止在衍生表達式內進行狀態變更（例如 count++）。

如同 $state，您可以將類別欄位標記為 $derived。

Svelte 元件中的程式碼只會在建立時執行一次。若沒有 $derived 符文，即使 count 變更，doubled 也會維持其原始值。

$derived.by

有時您需要建立複雜的衍生，這些衍生無法放入簡短的表達式中。在這些情況下，您可以使用 $derived.by，它接受一個函數作為其引數。

<script>
	let numbers = $state([1, 2, 3]);
	let total = $derived.by(() => {
		let total = 0;
		for (const n of numbers) {
			total += n;
		}
		return total;
	});
</script>

<button onclick={() => numbers.push(numbers.length + 1)}>
	{numbers.join(' + ')} = {total}
</button>

本質上，$derived(expression) 等同於 $derived.by(() => expression)。

理解依賴關係

在 $derived 表達式（或 $derived.by 函式主體）內同步讀取的任何內容都被視為衍生狀態的依賴項。當狀態變更時，衍生狀態將被標記為髒，並在下次讀取時重新計算。

若要免除某個狀態被視為依賴項，請使用 untrack。

在 GitHub 上編輯此頁面

$state $effect