Svelte响应式语句仅执行一次：原因排查与解决咨询

我正在开发一个简单的Svelte应用，包含两个代表队伍的子组件CounterComponent，初始分数均为20，先减至0的队伍失败。

父组件定义了两个状态变量：

<script>
  let scoreA = 20
  let scoreB = 20
</script>

子组件是带增减分功能的计数器，我将父组件的变量与子组件做了双向绑定：

<CounterComponent bind:score={scoreA} />
<CounterComponent bind:score={scoreB} />

为了实时检查分数变化，我用响应式语句调用checkState函数，但这个函数只执行一次，状态变化时不会触发：

<script>
  let scoreA = 20
  let scoreB = 20
  function checkState() {
    console.log(`Score A: ${scoreA}, Score B: ${scoreB}`)
  }
  $: checkState()
</script>

请问这是什么原因？该如何解决？

原因分析 #

这种情况大概率是以下两个原因之一：

• 子组件的双向绑定未正确实现：如果子组件没有正确导出score变量并触发更新，父组件的scoreA/scoreB不会实际变化，响应式语句自然不会重新执行。
• Svelte编译器未自动追踪到函数依赖：虽然checkState内部使用了scoreA和scoreB，但极端情况下编译器可能没识别到这些依赖，导致响应式语句仅在初始时执行一次。

解决方案 #

1. 确保子组件的双向绑定正确实现 #

子组件必须正确导出score，并且修改score时要直接赋值（Svelte会自动处理双向绑定的更新通知）。子组件示例代码：

<script>
  // 必须导出score才能支持双向绑定
  export let score;

  function decrementScore() {
    if (score > 0) score--;
  }

  function incrementScore() {
    score++;
  }
</script>

<button on:click={decrementScore}>-</button>
<span>{score}</span>
<button on:click={incrementScore}>+</button>

2. 显式声明响应式依赖 #

如果确认子组件没问题，但响应式语句还是不触发，可以显式列出依赖的变量，强制Svelte追踪它们的变化：

<script>
  let scoreA = 20
  let scoreB = 20

  function checkState() {
    console.log(`Score A: ${scoreA}, Score B: ${scoreB}`)
  }

  // 显式声明依赖的变量，只要其中一个变化就触发checkState
  $: [scoreA, scoreB], checkState();
</script>

<CounterComponent bind:score={scoreA} />
<CounterComponent bind:score={scoreB} />

这样修改后，每当scoreA或scoreB变化时，checkState都会被调用，实现实时状态检查。

内容的提问来源于stack exchange，提问作者eitan