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