Svelte 5 $effect 依赖追踪揭秘：为何能深入函数？

2025-04-15 05:32:31

好的，这是你要的博客文章：

解密 Svelte 5 Runes: $effect 为何能‘看见’函数内部的依赖？

刚从 Svelte 4 切换到 Svelte 5 的 Runes 模式，或者正在学习 Runes 的朋友，可能会遇到一个关于 $effect 行为的疑惑。我们来看两个例子。

Svelte 4 的情况:

<script>
  import { tick } from 'svelte'; // 假设我们需要tick

  let x = 1;
  let y = "还没到 10";

  function checkX() {
    console.log('Svelte 4: checkX 运行了');
    if (x > 10) {
      y = "超过 10 啦";
    }
  }

  // 使用 $: 反应式声明
  $: {
    // 这里并没有直接用到 x
    checkX();
    console.log('Svelte 4: 反应式块执行');
  }

  async function incrementX() {
    x += 1;
    // 等待DOM更新（虽然这里非必须，但养成好习惯）
    await tick();
    console.log(`Svelte 4: x 现在是 ${x}, y 是 "${y}"`);
  }
</script>

<div>
  <h3>Svelte 4 (非 Runes)</h3>
  <button on:click={incrementX}>增加 x ({x})</button>
  <p>y 的值: {y}</p>
</div>

在这个 Svelte 4 的组件里，我们有一个变量 x 和一个变量 y。还有一个函数 checkX，它会根据 x 的值来更新 y。关键在于 $: { checkX(); } 这个反应式声明。当你点击按钮增加 x 的值时，你会发现控制台输出了 x 的新值，但 y 的值并不会更新成 "超过 10 啦"，而且 Svelte 4: 反应式块执行 和 Svelte 4: checkX 运行了 也不会在 x 变化后打印。为什么呢？因为 Svelte 4 的编译器在分析依赖时，主要看 $: {} 代码块里直接引用了哪些反应式变量。在这个例子里，$: {} 只调用了 checkX()，并没有直接读取 x，所以 Svelte 4 认为这个代码块不依赖于 x 的变化。

Svelte 5 Runes 模式的情况:

<script>
  import { tick } from 'svelte'; // 假设需要 tick

  let x = $state(1);
  let y = $state("还没到 10");

  function checkXRunes() {
    console.log('Svelte 5 (Runes): checkXRunes 运行了');
    // 读取了 $state 变量 x
    if (x > 10) {
      y = "超过 10 啦"; // 修改 $state 变量 y
    }
  }

  // 使用 $effect
  $effect(() => {
    // effect 内部调用了 checkXRunes
    checkXRunes();
    console.log('Svelte 5 (Runes): $effect 运行了');
  });

  async function incrementXRunes() {
    x += 1; // 修改 $state 变量 x
    // Svelte 5 中 $state 的更新通常是即时的，
    // 但如果依赖 DOM 更新，tick 仍然有用
    await tick();
    console.log(`Svelte 5 (Runes): x 现在是 ${x}, y 是 "${y}"`);
  }
</script>

<div>
  <h3>Svelte 5 (Runes)</h3>
  <button on:click={incrementXRunes}>增加 x ({x})</button>
  <p>y 的值: {y}</p>
</div>

现在切换到 Svelte 5 的 Runes 模式。代码结构类似，只是用了 $state 声明反应式变量，并且用 $effect 替代了 $: {}。这次，当你点击按钮，x 的值增加，你会发现一旦 x 超过 10，y 的值确实会变成 "超过 10 啦"。并且，每次 x 变化时，控制台都会输出 Svelte 5 (Runes): $effect 运行了 和 Svelte 5 (Runes): checkXRunes 运行了。

问题来了：$effect 的回调函数 () => { checkXRunes(); } 里也没有直接使用 x 啊，为什么它就能响应 x 的变化呢？难道 Svelte 5 会分析 checkXRunes 函数内部的代码吗？如果函数调用层级很深呢？

为什么行为不同了？核心在于运行时追踪

这确实是 Svelte 4 到 Svelte 5 Runes 的一个核心变化。

Svelte 4 的 `$`：编译时分析的局限

就像前面提到的，Svelte 4 主要依赖 编译器 在构建时分析 $: {} 代码块。编译器会查看块内部的代码文本，找出直接引用的反应式变量（用 let 声明的顶层变量，或者 store）。如果找不到直接引用，它就认为这个块不依赖那个变量。

这种方法的好处是性能开销小，因为依赖关系在编译时就确定了。但缺点也很明显：

可能错过依赖 ：就像我们的例子，依赖藏在函数调用里，编译器没那么“聪明”去深入追踪，导致该更新的时候没更新。
可能多余追踪 ：在某些复杂场景下，编译器可能会过于保守，引入不必要的依赖，导致代码块在不该运行的时候也运行了（虽然不常见）。

Svelte 5 的 `$effect`：运行时动态追踪

Svelte 5 Runes 彻底改变了游戏规则。它不再主要依赖编译时分析来确定 effect 的依赖，而是引入了 运行时追踪 。

过程大概是这样的：

首次运行与订阅 ：当组件初始化时，$effect 的回调函数会 立即执行一次 。在这次执行期间，Svelte 的运行时系统会“监视”所有被读取的 $state 或 $derived 信号（也就是那些用 $state() 或 $derived() 创建的反应式变量）。
建立依赖图 ：每当 $effect 的回调函数在执行过程中读取了某个信号（比如 x），Svelte 就会记录下来：“哦，这个 $effect 对信号 x 感兴趣”。这样就建立了一个动态的依赖关系列表。
变更通知与重新运行 ：之后，无论何时，只要任何一个被这个 $effect 依赖的信号（比如 x）发生了变化（比如被赋予了新值），Svelte 的运行时系统就会通知所有订阅了该信号的 effect：“嘿，你关心的 x 变了！”。收到通知后，对应的 $effect 回调函数就会 重新执行 。
依赖更新 ：每次 $effect 重新执行时，它的依赖关系可能会更新。比如，如果一个信号只在某个 if 分支里被读取，那么只有当 if 条件为真时，那个信号才会被添加到依赖列表里。

$effect 如何“看穿”函数调用？

现在回答关键问题：$effect 是如何知道 checkXRunes 函数内部读取了 x 的？

答案很简单：因为它真的在运行时执行了 checkXRunes 函数！

当 $effect(() => { checkXRunes(); }) 首次运行时：

$effect 的回调函数被调用。
回调函数内部调用了 checkXRunes()。
程序流程进入 checkXRunes() 函数体。
执行到 if (x > 10) 这行时，为了判断条件，需要读取 $state 变量 x 的当前值。
就在读取 x 的那一刻，Svelte 的运行时系统捕捉到了这个操作，并记录下：“当前正在执行的这个 $effect 依赖于 x”。

这个过程不关心 x 是在 $effect 回调函数体里直接读取，还是在它调用的函数里读取，甚至是在这个函数调用的更深层嵌套的函数里读取。只要在 $effect 的同步执行流程中，任何一个 $state 或 $derived 信号被读取了，它就会成为该 $effect 的依赖。

所以，即便是这样：

<script>
  let deepVar = $state(0);

  function funcC() {
    console.log('funcC 读取 deepVar:', deepVar); // 读取发生在这里
  }

  function funcB() {
    funcC();
  }

  function funcA() {
    funcB();
  }

  $effect(() => {
    console.log('$effect 开始运行');
    funcA(); // 调用入口
    console.log('$effect 结束运行');
  });

  function updateDeepVar() {
    deepVar += 1;
    console.log('deepVar 更新为:', deepVar);
  }
</script>

<button on:click={updateDeepVar}>更新 Deep Var</button>

在这个例子里，$effect 调用 funcA，funcA 调用 funcB，funcB 调用 funcC，最后在 funcC 里面读取了 deepVar。没问题！只要你点击按钮更新 deepVar，$effect 照样会重新运行，因为在它第一次（以及后续）的执行过程中，deepVar 被读取了，依赖关系就这样建立起来了。

这种运行时追踪机制更加精确和符合直觉。代码怎么跑，依赖就怎么算。

$effect 的使用技巧和注意点

既然理解了 $effect 的工作原理，这里补充一些使用技巧和需要留意的地方。

1. 控制 Effect 的运行 G时机：`$effect.pre`

默认的 $effect 会在 DOM 更新之后运行。这对于大多数副作用（比如数据获取）是合适的。但有时你需要在 DOM 更新之前做一些事情，比如读取 DOM 布局信息。这时可以用 $effect.pre：

<script>
  let divElement = $state(null);
  let width = $state(0);

  $effect.pre(() => {
    if (divElement) {
      // 在 DOM 更新前读取宽度
      console.log('DOM 更新前运行 $effect.pre');
      // 注意：这里只是示例，实际场景下可能需要更复杂的逻辑
      // 读取某些需要在 paint 前获取的布局信息
    }
  });

  $effect(() => {
    if(divElement){
        console.log('DOM 更新后运行 $effect');
        // 更新宽度状态，这会触发下一次更新周期
         width = divElement.offsetWidth;
         console.log('获取到的宽度:', width);
    }
    // 清理函数（可选）
    return () => {
      console.log('$effect 清理');
    };
  });
</script>

<div bind:this={divElement} style="width: {Math.random() * 200 + 100}px; border: 1px solid red; margin-top: 10px;">
  我是一个 div, 宽度: {width}px
</div>
<button onclick={() => divElement.style.width = `${Math.random() * 200 + 100}px`}>随机改变宽度</button>

在这个例子里 $effect.pre 可以用来在 Svelte 对 DOM 做改动前执行一些操作。 $effect 在 DOM 更新后运行, 在这里获取 DOM 的宽度。

2. 避免不必要的追踪：`untrack`

有时候，你希望在 $effect 内部读取一个信号，但 不希望 当这个信号变化时触发 $effect 重新运行。比如，你可能只是想在某个依赖变化时，顺便打印一下另一个信号的当前值。这时可以用 untrack 函数：

<script>
  import { untrack } from 'svelte';

  let count = $state(0);
  let unrelated = $state('abc');

  $effect(() => {
    // 这个 effect 主要依赖 count
    console.log(`Count 变化了: ${count}`);

    // 我们想在这里读取 unrelated，但不想让 unrelated 的变化触发 effect
    const currentUnrelated = untrack(() => unrelated);
    console.log(`(不追踪) Unrelated 的当前值是: ${currentUnrelated}`);

    // 如果直接读取 unrelated:
    // console.log(`(追踪) Unrelated: ${unrelated}`);
    // 那么 unrelated 变化时，effect 也会重跑
  });

</script>

<button on:click={() => count++}>增加 Count ({count})</button>
<button on:click={() => unrelated = Math.random().toString(36).substring(7)}>改变 Unrelated ({unrelated})</button>

在这个例子里，点击“改变 Unrelated”按钮只会更新 unrelated 的值，不会触发 $effect 重新运行，因为它在 untrack 回调中被读取。只有点击“增加 Count”按钮时，$effect 才会执行。

3. 清理副作用

$effect 和 $effect.pre 的回调函数可以返回一个“清理函数”。这个清理函数会在下一次 effect 即将运行之前，或者在组件被销毁时执行。这对于清理那些需要手动管理的副作用非常重要，比如设置的定时器、添加的全局事件监听器、创建的 WebSocket 连接等。

<script>
  let intervalId = null;
  let seconds = $state(0);

  $effect(() => {
    console.log('$effect 开始运行，设置定时器');
    intervalId = setInterval(() => {
      // 这里不应该直接修改外部 $state 来触发effect重新执行，
      // 除非这是你的明确意图。这里只做打印示例。
      // 如果需要根据 interval 更新状态，考虑其他模式或 $effect.pre
       console.log('定时器触发');
    }, 1000);

    // 返回清理函数
    return () => {
      console.log('$effect 清理：清除定时器', intervalId);
      clearInterval(intervalId);
      intervalId = null;
    };
  });

  // 一个示例：用按钮控制 seconds，模拟 $effect 的依赖变化
  // (尽管这个 $effect 本身不依赖 seconds)
  // 如果 effect 依赖了 seconds，改变它会导致 effect 清理并重新运行
</script>

<p>只是为了有个东西能更新触发 effect (虽然本例 effect 不依赖它)</p>
<button on:click={() => seconds++}>增加 Seconds ({seconds})</button>

当组件挂载时，$effect 运行，定时器启动。如果 seconds 状态变化（或者任何这个 effect 实际依赖的状态变化），在下一次 $effect 运行前，会先调用清理函数 clearInterval，然后 $effect 再重新运行并设置新的定时器。当组件销毁时，清理函数也会被调用。

安全建议：避免无限循环

使用 $effect 时要特别小心一种情况：在 effect 内部读取了一个信号，然后又无条件地修改了同一个信号。这很容易造成无限循环，因为修改会触发 effect 重新运行，然后再次读取和修改，如此往复。

<script>
  // !!! 危险：可能导致无限循环 !!!
  let counter = $state(0);

  // $effect(() => {
  //   console.log(`Counter: ${counter}`);
  //   // 读取 counter，然后无条件增加 counter
  //   counter = counter + 1; // 这一行会导致无限循环！
  // });
</script>

<p>请取消上面 $effect 的注释来观察（或者不取消以保平安）</p>

如果确实需要在 effect 中修改其依赖的信号，必须确保有一个明确的退出条件或者修改逻辑不会总是触发自身。比如，仅在满足特定条件时才修改，或者使用 untrack 来读取旧值进行比较判断。

总结来说，Svelte 5 Runes 的 $effect 采用运行时追踪，能够精确捕捉到执行过程中对 $state 或 $derived 信号的读取，无论读取发生在哪个函数调用层级。这使得反应式系统的行为更加直观和强大，但也需要开发者理解其工作原理，特别是注意副作用的清理和避免无限循环。