Svelte 5中$effect未触发类实例属性变更问题排查

问题复现 #

模块代码（module.svelte.js） #

class TestClass {
    attribute = $state(0);
}

export const test = $state(new TestClass());

组件代码（+layout.svelte） #

<script>
    import { test } from "./module.svelte.js";

    $effect(() => {
        console.log(test);
        console.log($state.snapshot(test));
        // 仅DOM挂载时执行一次，点击按钮修改属性无输出
    });
</script>

<p>{test.attribute}</p>
<button onclick={() => test.attribute++}>increment</button>

点击按钮修改test.attribute时，预期$effect会触发，但实际仅在组件挂载时执行一次，后续无反应。仅在$effect中显式访问test.attribute才会触发，但项目中对象属性众多，无法逐一枚举。

技术原因分析 #

Svelte 5的响应式依赖收集是精准追踪访问的响应式节点，而非整个对象：

1. 外层的$state(new TestClass())仅追踪test对象的引用变化，当修改对象内部的$state属性时，对象引用未变，因此不会触发依赖该对象引用的$effect。
2. $state.snapshot(test)只是生成对象的快照，它本身不会触发内部属性的依赖收集，所以$effect依然只追踪到test的引用，而非内部属性。
3. class内部的$state属性是独立的响应式单元，只有当代码直接访问该属性时，才会被加入当前上下文的依赖列表。

无需枚举属性的解决方案 #

方案1：用$derived生成对象全量快照 #

利用$derived自动追踪所有内部响应式属性的特性，生成对象的完整快照，让$effect依赖这个快照：

<script>
    import { test } from "./module.svelte.js";
    import { $derived } from 'svelte';

    // 自动追踪test内部所有$state属性的变化
    const testSnapshot = $derived($state.snapshot(test));

    $effect(() => {
        console.log(testSnapshot);
        // 这里可以执行localStorage持久化逻辑
    });
</script>

当test内部任何$state属性变化时，testSnapshot会更新，进而触发$effect。

方案2：给class添加版本号追踪 #

在class内部维护一个响应式的版本号，每次修改属性时更新版本号，让$effect依赖版本号：

// module.svelte.js
class TestClass {
    attribute = $state(0);
    // 响应式版本号，每次修改属性时更新
    #version = $state(0);

    get version() {
        return this.#version;
    }

    incrementAttribute() {
        this.attribute++;
        this.#version++;
    }

    // 其他属性修改方法同理，最后都更新版本号
}

export const test = $state(new TestClass());

<script>
    import { test } from "./module.svelte.js";

    $effect(() => {
        // 访问版本号，触发依赖收集
        test.version;
        console.log($state.snapshot(test));
        // 执行持久化逻辑
    });
</script>

<p>{test.attribute}</p>
<button onclick={() => test.incrementAttribute()}>increment</button>

这种方式通过版本号的变化，间接触发$effect，无需枚举所有属性。

方案3：使用$state包裹整个对象的序列化结果 #

如果对象可以被序列化，也可以用$derived生成序列化字符串，让$effect依赖该字符串：

<script>
    import { test } from "./module.svelte.js";
    import { $derived } from 'svelte';

    const testSerialized = $derived(JSON.stringify($state.snapshot(test)));

    $effect(() => {
        localStorage.setItem('test', testSerialized);
    });
</script>

此方法适合简单对象，复杂对象需注意序列化兼容性。

内容的提问来源于stack exchange，提问作者Sup2.0