Svelte中$响应式标记如何识别所引用的关联状态变量？

示例代码 #

<script>
    let count = 0;

    function handleClick() {
        count += 1;
    }
    $: {
        console.log('test'); // 仅执行1次
        // console.log(count); 取消注释后，count每次变更都会触发该语句块执行
    }
</script>

<button on:click={handleClick}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

核心实现逻辑 #

Svelte的$:响应式能力完全基于编译阶段的静态代码解析实现，没有运行时的Proxy、getter/setter依赖收集逻辑，和Vue、React等框架的运行时响应式方案有本质区别。
具体识别规则非常直接：

• 编译阶段Svelte会先提取所有被$:标记的响应式语句/语句块，逐个扫描代码段内实际引用的变量，筛选出属于当前组件内声明的可变状态。
• 如果响应式块内没有引用任何组件内的可变状态——比如示例中仅写console.log('test')时，用到的console是全局API、'test'是固定字符串，没有用到count这类会变化的组件状态——Svelte编译后只会把这段代码放到组件初始化流程中，组件首次挂载完成后执行一次就结束，不会绑定任何更新触发逻辑。
• 一旦响应式块内引用了count这类组件内声明的可变状态，Svelte编译时就会给这段代码标记对应依赖：只要检测到依赖的状态被赋值更新，就会在状态更新完成后重新执行该响应式块的逻辑。

这种静态解析的方案也决定了Svelte响应式的明确边界：如果在$:块中使用组件外声明的全局变量，哪怕全局变量的值发生变化，响应式块也不会自动重跑——因为编译阶段Svelte识别不到该变量属于当前组件的可控状态，不会为其绑定更新触发逻辑。

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