Svelte变量变更时函数未触发/未重渲染的问题及解决

Svelte的响应式更新是编译时静态追踪的，它只会直接监控模板中显式引用的响应式变量。你模板里调用的isSelected(id)，Svelte会把它当成一次性计算的静态值，不会主动分析函数内部用到了selectedId这个响应式变量。所以当selectedId更新时，Svelte不知道需要重新执行isSelected来更新按钮的class状态。

把isSelected声明为响应式函数，用Svelte的$:标记语法，这样Svelte会自动追踪函数内部的响应式依赖，当selectedId变化时，自动重新计算所有调用该函数的地方：

<script lang="ts">
  const ids = [1, 2, 3, 4, 5];

  let selectedId!: number;

  // 用$:标记为响应式函数，Svelte会监控内部的selectedId变化
  $: isSelected = (id: number): boolean => {
    // 这里可以添加任意复杂判断逻辑
    return id === selectedId;
  }

  const selectId = (id: number) => {
    selectedId = id;
  }
</script>

<div>
  {#each ids as id}
    <button type="button" class:selected={isSelected(id)} on:click={() => selectId(id)}>{id}</button>
  {/each}
</div>

<style>
  .selected {
    background-color: red;
  }
</style>

$:是Svelte的响应式声明语法，任何用它标记的语句或函数，都会在其依赖的响应式变量变化时自动重新执行。这种方式既保留了代码的封装性（把复杂判断放在函数里），又符合Svelte的响应式机制，完美适配你的需求。

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