Svelte4迁移Svelte5：$effect操作缓存引发无限循环问题咨询

你的代码存在的问题 #

1. 拼写错误：chache.get(id)应为cache.get(id)，会直接导致运行时错误。
2. $effect使用方式错误：Svelte5中$effect是函数，需调用并传入回调，而非直接赋值（正确写法是$effect(() => {...})）。
3. 无限循环风险：$effect内读取了响应式的cache.has(id)，同时又调用cache.set修改cache状态——这会让effect追踪cache的变化，每次cache更新都会触发effect重新执行，形成不必要的循环，极端场景下会导致无限循环。

解决方案：拆分派生状态与缓存加载逻辑 #

核心思路是用$derived自动维护thing的响应式，同时让缓存加载逻辑仅响应id的变化，避免追踪cache的更新。

<script>
  import { $props, $derived, $effect, untrack } from 'svelte';
  import { SvelteMap } from 'svelte/reactivity';

  let { id } = $props();
  const cache = new SvelteMap();

  // 自动派生thing，响应id和cache的变化
  const thing = $derived(cache.get(id));

  // 仅在id变更时加载缓存，用untrack避免追踪cache
  $effect(() => {
    if (!untrack(() => cache.has(id))) {
      (async () => {
        const data = await get_thing(id);
        cache.set(id, data);
      })();
    }
  });
</script>

方案优势 #

• 自动响应式维护：thing通过$derived直接关联id和cache，无需手动赋值，减少人为操作错误。
• 消除循环风险：untrack包裹cache.has(id)，让effect仅对id的变化做出响应，cache更新不会触发effect重跑。
• 异步逻辑清晰：用立即执行函数包裹异步加载逻辑，避免effect直接返回Promise，符合Svelte最佳实践。

可选变体：提前执行缓存加载 #

若需要在组件渲染前加载数据，可将$effect替换为$effect.pre，逻辑完全一致，仅执行时机更早。

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