Svelte Runes

$effect(...)

2025-06-09

$effect[[Svelte]] 中的一个 Rune,和 [[docs/Programming/Framework/Svelte/runes/inspect|$inspect(…)]] 类似,都能在值变化时重新运行,但不同的是 $effect 可以执行自定义的响应式操作。

使用

比如当 count 改变时,可以修改标题:

<script lang="ts">
let count = $state(0);
$effect(() => {
console.log(count); // 打印日志
document.title = `计数: ${count}`; // 比如修改DOM
});
</script>
<button onclick={() => count += 1}>
Click Add {count}
</button>

参考