5

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总是返回undefined。那么规则是什么？不知何故，Svelte“神奇地”收集 之后的所有变量$:，然后如果它们中的任何一个发生变化，则执行$:?之后的行 所以即使变量不参与形成一些最终值，它仍然被考虑吗？

4

2 回答 2

10

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

它的工作原理与您所描述的完全一样：当反应块中的任何变量发生变化时，该块就会被执行。

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

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

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

如果你想排除一个变量被监视，然后从反应块中提取使用它的处理：

// 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");
}
于 2020-02-03T02:15:15.497 回答
4

你是对的。Svelte 的反应是基于分配的。

API 是这样说的：

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

于 2020-02-03T02:16:52.313 回答