如何在Svelte中仅监听嵌套属性变化？解决Store场景误触发问题

在Svelte中，当使用对象类型的writable store时，修改任意嵌套属性都会触发所有依赖该store或其属性的反应式语句——比如你示例中点击按钮更新$s.y时，监听$s.x的逻辑也会执行。这是因为Svelte的反应式追踪基于引用变化，对象引用未改变但内部属性更新时，Svelte会判定整个$s发生了变化，进而触发所有关联的反应式代码。

以下是几种解决方法，实现类似Vue中@Watch('s.x')的精准监听效果：

1. 拆分为独立Store #

将嵌套属性拆成单独的writable store，每个属性对应一个store，这样可以直接精准监听单个属性的变化：

<script>
    import { writable } from 'svelte/store';
    const x = writable(1);
    const y = writable(2);

    $: console.log('x updated:', $x);
    $: console.log('y updated:', $y);
</script>

<button on:click={() => $y++}>Update y</button>

这种方式简单直观，适合属性之间关联性较弱的场景。

2. 使用派生Store（derived）创建属性监听 #

如果需要保留原对象结构，可以通过derived创建仅依赖特定嵌套属性的派生store，再监听派生store的变化：

<script>
    import { writable, derived } from 'svelte/store';
    const s = writable({ x: 1, y: 2 });
    // 创建仅监听x属性的派生store
    const sX = derived(s, $current => $current.x);

    $: console.log('store整体更新:', $s);
    $: console.log('x属性更新:', $sX);
</script>

<button on:click={() => $s.y++}>Update y</button>

点击按钮时，只有监听$s和$sY（如果有）的逻辑会触发，sX的监听不会执行。

3. 手动对比属性变化 #

在反应式语句中手动记录属性的上一次值，对比当前值是否变化后再执行逻辑：

<script>
    import { writable } from 'svelte/store';
    const s = writable({ x: 1, y: 2 });
    let prevX = $s.x;

    $: {
        if ($s.x !== prevX) {
            console.log('x属性更新:', $s.x);
            prevX = $s.x;
        }
    }

    $: console.log('store整体更新:', $s);
</script>

<button on:click={() => $s.y++}>Update y</button>

这种方式无需拆分store或创建派生store，适合需要保留原结构且灵活控制触发条件的场景。

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