Svelte中变量变更时如何重新渲染each块？

问题根源 #

你用{#each {length: wordLength} as _, i}循环时，Svelte只会监测循环数据源（也就是那个{length: wordLength}对象）的引用变化。当$Guess更新时，这个数据源的引用没改变，所以each块不会触发重新渲染，哪怕getGuessInfo(i)依赖$Guess也没用。

可行解决方案 #

方案1：用派生数组绑定依赖 #

生成一个依赖$Guess和wordLength的固定长度数组，让each块的数据源随$Guess变化更新：

<script>
  // 假设已有$Guess、wordLength和getGuessInfo函数
  $: fixedSlots = Array.from({ length: wordLength }, (_, i) => i);
</script>

{#each fixedSlots as i}
  <button>
    {getGuessInfo(i).letter || ''}
    <!-- 可根据状态添加样式，比如class={getGuessInfo(i).status} -->
  </button>
{/each}

$:标记的语句会在$Guess或wordLength变化时重新执行，生成新的fixedSlots数组，each块会重新遍历并调用getGuessInfo。

方案2：给each项添加动态键 #

直接在each块中绑定包含$Guess的键，让Svelte感知到每个项的依赖变化：

{#each {length: wordLength} as _, i ([$Guess, i])}
  <button>
    {getGuessInfo(i).letter || ''}
  </button>
{/each}

括号里的([$Guess, i])是each项的唯一标识，当$Guess变化时，每个项的标识都会更新，Svelte会重新渲染对应的项。

为什么之前的尝试无效 #

你写的$: $Guess && getGuessInfo()只是单独调用了函数，但没有把函数的执行结果和each块的渲染绑定起来。Svelte需要明确的数据源变化或者依赖关联，才会触发UI更新。

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