Svelte未更新可传递依赖项

Question

在我的组件中，我有三个变量，其中value2取决于value1，value3取决于value2。当我更新value1时，value2得到更新，但value3保持不变。我是斯维尔特的新手。这种行为有记录吗？

游乐场：https://svelte.dev/repl/c092a060a12641489d81e2c5857473bf?version=3.50.1

<script>
let value1 = 0;
let value2 = 0;
let value3 = 0;

function updateValue3(value) {
value3 = value;
}

$: updateValue3(value2);

function updateValue2(value) {
// uncomment this to make it working
//      setTimeout(() => {
//          value2 = value;
//      });

value2 = value;
}
$: updateValue2(value1);
</script>
<button on:click={() => value1++}>increment</button>
<h1>value1: {value1}, value2: {value2}, value3: {value3}</h1>

Answer 1

您可以通过对反应语句进行不同的排序来修复它。

$: updateValue2(value1);
$: updateValue3(value2);

REPL-

Svelte应该自动排序依赖项，但因为分配是"；隐藏的"；在函数内部，Svelte编译器不知道依赖项，因此您必须手动修复顺序。

如果您没有功能并直接分配，则订单将不重要：

$: value3 = value2;
$: value2 = value1;

---

固定订单生成此更新代码：

$$self.$$.update = () => {
if ($$self.$$.dirty & /*value1*/ 1) {
$: updateValue2(value1);
}
if ($$self.$$.dirty & /*value2*/ 2) {
$: updateValue3(value2);
}
};

原始代码生成以下内容：

$$self.$$.update = () => {
if ($$self.$$.dirty & /*value2*/ 2) {
$: updateValue3(value2);
}
if ($$self.$$.dirty & /*value1*/ 1) {
$: updateValue2(value1);
}
};

dirty标志随后在每次更新时被重置，并且第一个条件从不为真。

Answer 2

刚刚用以下内容更新了您的游乐场。它是有效的，我想你可以弄清楚区别。

<script>
let value1 = 0;
let value2 = 0;
let value3 = 0;

function updateValue3(value) {
value3 = value;
}

function updateValue2(value) {
value2 = value;
}
$: {
updateValue2(value1);
updateValue3(value2);
}
</script>