在 Svelte JS 中，如果某个变量只是被打印但不参与给出值，那么反应变量如何工作？

Question

https://svelte.dev/repl/f8db4771ba794c658d7c25a6e72d1b46?version=3.18.1中的代码

有两个“反应变量”：

$: nameUpperCase = name.toUpperCase();

$: if (name === "city") { 
    console.log("RUNNING HERE 01", age);
} else {
    console.log("RUNNING HERE 02", age);
}

如果值发生name变化，那么nameUpperCase也会发生变化。这个很容易。

但是对于第二部分，似乎当nameor的值age发生变化时，则对该if行进行评估。如果从age中删除console.log()，如https://svelte.dev/repl/68c2cdea2bfd462caa5ac5519fb8b99d?version=3.18.1 中所示，则age更改无关紧要。if不评估该行。

但是age从不参与为if语句生成任何最终值。它只是被打印出来，并且console.log总是 return undefined。那么规则是什么？不知何故，Svelte“神奇地”收集了 之后的所有变量$:，然后如果其中任何一个发生变化，则执行$:? 那么即使变量不参与形成某个最终值，它仍然被考虑吗？

Answer 1

你的问题的框架方式，我认为“是”将是一个正确的答案。

它完全按照您的描述工作：当反应块中的任何变量发生变化时，块就会被执行。

这就是规则。简单的。可预测的。看看你自己是如何正确地直觉的？

与在视图中自动反映变量的值相比，这不再是（或更少）魔法。Svelte 已经知道代码中的所有（顶级）变量。

反应块是否“产生”一个值（反应声明vs语句）是无关紧要的。这只是“所有变量”。

如果你想从观察中排除一个变量，那么从反应块中提取使用它的处理：

// runs when `name` or `age` change
$: if (name === "city") { 
    console.log("RUNNING HERE 01", age);
} else {
    console.log("RUNNING HERE 02", age);
}

const logAge = msg => console.log(msg, age)

// only runs when `name` changes
$: if (name === "city") { 
    logAge("RUNNING HERE 01");
} else {
    logAge("RUNNING HERE 02");
}

Answer 2

你说得对。Svelte 的反应性基于分配。

API 是这样说的：

任何顶级语句（即不在块或函数内）都可以通过在其前面加上 $: 来使其响应。只要响应式语句所依赖的值发生更改，它们就会在组件更新之前立即运行。