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

Question

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

有两个“ react 变量”:

$: nameUpperCase = name.toUpperCase();

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

如果 name的值更改，然后 nameUpperCase也得到改变。这个很容易。

但对于第二部分，似乎当 name 的值或 age改了，那么 if行进行评估。如果 age已从 console.log() 中删除，如 https://svelte.dev/repl/68c2cdea2bfd462caa5ac5519fb8b99d?version=3.18.1那么无所谓 age变化。 if线不被评估。

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

Answer 1

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

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

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

与在 View 中自动反射(reflect)变量的值相比，这不再是(或更少)魔法。 Svelte 已经知道代码中的所有(顶级)变量。

react 块是否“产生”一个值( react 声明 vs 语句)是无关紧要的。这只是“所有变量”。

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

// 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");
}