如何让Svelte仅在依赖值变更时触发响应而非赋值时？

核心原因 #

Svelte的$:响应式语句是赋值触发而非值变化触发——只要变量被赋值（哪怕和原值完全相同），就会标记变量为脏状态，进而运行所有依赖它的响应式逻辑，这就导致了无意义的昂贵操作重复执行。

内置解决方法 #

1. 使用derived Store（推荐） #

Svelte的derived Store内置了值对比逻辑（默认浅比较），仅当依赖的Store值实际发生变化时，才会重新执行派生逻辑，完美适配你的场景：

<script>
  import { writable, derived } from 'svelte/store';

  // 将需要监听的变量封装为writable Store
  const currentId = writable(1);

  // 仅当currentId的值实际变化时，执行数据库查询等操作
  const fetchData = derived(currentId, ($id, set) => {
    // 执行昂贵操作
    console.log(`执行数据库查询，id: ${$id}`);
    
    // 示例异步查询逻辑
    const controller = new AbortController();
    fetch(`/api/data/${$id}`, { signal: controller.signal })
      .then(res => res.json())
      .then(data => set(data));

    // 可选：页面卸载或值变更时取消未完成的请求
    return () => controller.abort();
  });

  // 在模板或脚本中使用派生结果
  $: const data = $fetchData;
</script>

<button on:click={() => $currentId = 1}>重复设置相同ID</button>

重复给$currentId赋值相同值时，derived内的逻辑不会重复执行。

2. 普通变量的极简处理 #

如果不想使用Store，可以封装一个复用性强的工具函数，替代手动维护大量lastXXX变量：

<script>
  let id = 1;

  // 封装工具函数：仅当值变化时执行回调
  function runOnChange(value, callback) {
    let prevValue = value;
    return () => {
      if (value !== prevValue) {
        prevValue = value;
        callback(value);
      }
    };
  }

  // 直接在响应式语句中使用
  $: runOnChange(id, (newId) => {
    console.log(`执行数据库查询，id: ${newId}`);
    // 执行你的昂贵操作
  })();
</script>

额外说明 #

如果需要处理引用类型（比如对象、数组）的变化，derived的默认浅比较可能不够，这时可以给derived传入第三个参数自定义比较函数：

const fetchData = derived(
  userFilter,
  ($filter, set) => {
    // 执行查询逻辑
  },
  // 自定义深比较函数，判断值是否真的变化
  (a, b) => JSON.stringify(a) === JSON.stringify(b)
);

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