Svelte中为何引用appointment的响应式语句会被输入触发？

问题场景 #

我编写了两段Svelte代码，遇到了响应式触发的疑问：

第一段代码 #

let formValues: AppointmentWrite;
$: formValues = {
    ...appointment
}

$: console.log(appointment);

其中formValues的comments属性与输入框绑定，在输入框中输入内容时，上述代码中的console.log(appointment)会被触发。

第二段代码（移除扩展运算符后） #

$: formValues = {
   comments: '',
}

$: console.log(appointment);

此时console.log(appointment)不再被触发。

疑问：为何第一段代码中的console.log会被触发？明明appointment变量并未发生变化，只是出现在响应式表达式的右侧。

原因解释 #

这是因为Svelte的响应式系统基于变量引用追踪，而非单纯的值变化判断：

• 在第一段代码中，$: formValues = { ...appointment }这条响应式语句声明了对appointment的依赖。当你修改formValues.comments（输入框绑定触发更新）时，虽然appointment本身的值没有改变，但Svelte的响应式调度会把所有依赖appointment的响应式语句标记为需要重新执行，自然包括下方的$: console.log(appointment)。
• 第二段代码里，formValues的赋值语句不再依赖appointment，修改formValues.comments时，只有和formValues相关的更新会触发，console.log(appointment)因为没有关联到触发更新的变量，所以不会执行。

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