近日，随着Svelte 5正式版发布临近，开发者社区围绕“异步回调中依赖追踪的惯用方式”展开了广泛热议。Svelte 5引入了全新的响应式系统“runes”（$state、$derived、$effect等），旨在取代原有的 $: 声明式响应和 onMount 状态管理。然而，在异步场景下，如何高效且正确地追踪依赖关系，却成为了不少开发者面临的棘手问题。

从“魔法”到“显式”：Svelte 5响应式重构

在Svelte 4及更早版本中，$: 语句会通过编译时静态分析自动追踪依赖。例如：

<script>
  let count = 0;
  $: doubled = count * 2;
  $: if (count > 5) console.log('超过5了');
</script>

这种“魔法”般的隐式追踪给开发者带来便利，但在处理异步回调（如 setTimeout、Promise.then、fetch 回调）时，依赖关系往往难以被编译器准确捕获。因此，Svelte 5彻底重构了响应式内核，要求开发者通过 $effect 明确声明副作用及其依赖。

异步回调的依赖追踪：常见误区与真实案例

假设我们有一个组件，需要在异步操作完成后更新UI，并根据某个响应式变量执行逻辑。一个典型的错误写法是：

<script>
  let userId = $state(1);
  let userData = $state(null);

  async function fetchUser() {
    const res = await fetch(`/api/users/${userId}`);
    userData = await res.json();
  }

  // 错误：直接调用异步函数，依赖userId未显式声明
  $effect(() => {
    fetchUser();
  });
</script>

在这个例子中，$effect 的回调里调用了异步函数 fetchUser，但编译器无法自动识别 userId 是该副作用的依赖，因为 userId 仅在被 fetchUser 内部引用，而 fetchUser 是在回调中调用的。在Svelte 5中，$effect 只会追踪在回调函数同步执行阶段被读取的响应式状态。异步操作（如 await）之后读取的状态，并不会被自动追踪。

因此，如果 userId 发生变化，$effect 并不会重新运行，导致 fetchUser 不会被重新调用，用户界面无法响应更新——这是一个典型的“过时数据”bug。

官方推荐的惯用做法：显式声明依赖数组

面对这一困境，Svelte 5提供了两种惯用解决方案。第一种是利用 $effect 的第二个参数——一个可选的依赖数组（类似React的 useEffect）。开发者可以明确告诉Svelte哪些状态变化时需要重新执行副作用：

<script>
  let userId = $state(1);
  let userData = $state(null);

  $effect(() => {
    async function fetchUser() {
      const res = await fetch(`/api/users/${userId}`);
      userData = await res.json();
    }
    fetchUser();
  }, () => [userId]); // 显式声明依赖
</script>

通过 () => [userId] 返回依赖列表，Svelte会在 userId 变化时重新运行 $effect，从而保证异步回调能获得最新的依赖值。

第二种方案是使用 untrack 函数来阻止不需要的依赖追踪，并配合 $effect.root 进行更精细的控制。但对于大多数场景，显式依赖数组已经足够清晰。

社区声音：从“不习惯”到“真香”

Svelte核心团队成员在最近的开发者博客中指出：“我们理解大家习惯了Svelte 4的简洁，但在异步回调的场景下，隐式依赖追踪存在不可消除的不确定性。$effect 加上显式依赖数组，让代码逻辑更透明，也更容易推理。”

独立开发者 Sarah Chen 在自己的技术博客中分享了迁移体验：“刚开始觉得繁琐，但用了一段时间后，反而觉得Svelte 5的做法减少了难以重现的bug。特别是在处理多个异步请求时，显式声明依赖让团队代码审查也变得顺畅。”

边界情况与注意事项

需要注意的是，如果异步回调中依赖的响应式状态较多，依赖数组会变得冗长。此时可考虑将相关状态合并为一个对象或使用 $derived 派生值来简化：

<script>
  let searchQuery = $state('');
  let sortOrder = $state('asc');

  // 将多个依赖合并为一个派生值
  let fetchParams = $derived({ searchQuery, sortOrder });

  $effect(() => {
    async function loadData() {
      const url = `/api?q=${fetchParams.searchQuery}&sort=${fetchParams.sortOrder}`;
      // ...
    }
    loadData();
  }, () => [fetchParams]);
</script>

此外，若需在异步回调内部手动触发重新执行，可借助 $effect.root 创建一个独立的效应作用域，再配合状态写入来驱动更新。

结语

Svelte 5通过 runes 重新定义了响应式系统的边界，给开发者带来了更清晰、更可控的状态管理机制。虽然在异步回调依赖追踪上需要额外注意依赖数组的声明，但这恰恰是Svelte团队在“易用性”与“正确性”之间做出的权衡。对于已经习惯了Svelte 4的开发者而言，适应这一变化是值得的——毕竟，在复杂的异步交互越来越普遍的现代Web开发中，能够精准捕获依赖关系的响应式系统，才是真正可靠的生产力工具。