模板表达式与事件

Svelte 编译器把声明式组件转成直接更新 DOM 的 JavaScript；模板事件、each key 和条件块仍需稳定身份。练习：重排列表观察 keyed 与 unkeyed。

本节专属实验：区分派生值和副作用

在 Svelte 5 组件中记录 $state、$derived 和 $effect 的执行顺序。先让派生值只由输入计算，再把同样逻辑错误地写成 effect 写回 state，比较更新次数并观察循环风险。

<script>
  let count = $state(0)
  let doubled = $derived(count * 2)
  $effect(() => console.log('external sync', count))
</script>
<button onclick={() => count++}>{count} / {doubled}</button>

预期：点击只改变事实状态，派生值同步变化；组件销毁时 effect 的清理函数执行一次。

可运行实验

1. 修改状态、派生值和数组项，观察哪些更新会触发。
2. 将组件销毁，确认订阅、定时器和事件监听是否清理。
3. 说明该概念与 SSR、stores、actions 或过渡动画的连接。

实验记录至少包含：环境版本、输入序列、预期结果、实际结果、失败截图或日志，以及修复后再次运行的结果。

练习

1. 用自己的话画出本篇概念的依赖图，并标出一个可能产生重复执行或竞态的节点。
2. 写一个最小测试覆盖成功、失败、取消/卸载三条路径；测试应断言可观察结果，而不是内部实现调用次数。
3. 给出一个选择当前方案而不是替代方案的理由，并写下替代方案何时更合适。

查看本节答案

下一步

完成练习后阅读本章答案。