Svelte中函数调用无响应：替代#key块的更优方案探讨

方法1：将包装函数声明为响应式函数 #

Svelte的$:标记能让语句在依赖的响应式变量变化时自动重新执行。把getFormattedValue用$:声明后，每次data更新时，函数会重新绑定最新的data，模板调用时自然会获取到新值：

<script>
  export let data, node
  // 用$:标记，让函数依赖data的变化
  $: getFormattedValue = (synonym) => node.getFormattedAttrValue(data, synonym)
</script>

<Card>
  <span slot="Body">
    <li>{getFormattedValue("CURRENT_VALUE")}</li>
    <li>{getFormattedValue("MIN_VALUE")}</li>
    <li>{getFormattedValue("MAX_VALUE")}</li>
    <li>{getFormattedValue("PCT_CONSUMED")}%</li>
  </span>
</Card>

这个方案无需修改模板结构，仅调整函数声明即可，DOM只会更新变化的文本内容，不会触发整个块的重建。

方法2：将每个格式化值声明为响应式变量 #

如果需要显示的属性数量不多，可以直接把每个值单独声明为响应式变量，模板直接引用变量即可，可读性和性能表现都更优：

<script>
  export let data, node

  $: currentValue = node.getFormattedAttrValue(data, "CURRENT_VALUE")
  $: minValue = node.getFormattedAttrValue(data, "MIN_VALUE")
  $: maxValue = node.getFormattedAttrValue(data, "MAX_VALUE")
  $: pctConsumed = node.getFormattedAttrValue(data, "PCT_CONSUMED")
</script>

<Card>
  <span slot="Body">
    <li>{currentValue}</li>
    <li>{minValue}</li>
    <li>{maxValue}</li>
    <li>{pctConsumed}%</li>
  </span>
</Card>

这种方式下Svelte能精准追踪每个变量的变化，仅更新对应的DOM节点，是性能最优的方案。

为什么这些方案比{#key data}更好？ #

{#key data}会销毁整个块内的DOM元素并重新创建，当data频繁变化时会带来不必要的性能开销。而上面两种方案都是基于Svelte的响应式系统进行局部更新，只会修改需要变化的内容，避免了DOM的销毁重建。

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