响应式语句的执行顺序是什么？

Question

假设我们有以下组件脚本

let x = 0;

function increase() {
    x += 1;
}

$: console.log(x)

$: if (x == 4) {
    x = 0;
}

直觉上，我期望持续调用increase, 是将值0,1,2,3,4,1,2,3,4,...记录到控制台。但这种情况并非如此。相反，第二个反应式语句首先运行，并且4从不记录；这是0。切换反应语句的顺序没有任何效果。

如何使日志记录语句在另一个语句之前执行？它首先运行第二个的原因是什么？

Answer 1

Svelte不指定/保证依赖于相同变量的反应式语句的运行顺序。您必须在构建组件时期望它们可以按任何顺序运行，并确保您的代码不依赖于任何特定顺序。

您也不能依赖在特定情况下观察到的给定顺序 - 它可能会随着 Svelte 内部实现的更改（例如新的优化）而更改，或者当您自己的组件的代码更改时（导致不同的编译器输出，即可以出于难以预料的原因改变反应块的顺序）。

发生这种情况的原因是高度技术性的（即我真的不知道），但它们归结为编译器的易于实现/优化。反应式语句是一种异步操作，通常无法保证执行顺序。

如果您确实需要按特定顺序发生 2 个操作，那么为了安心，您需要将它们放在同一个反应块中。

    $: {
        console.log(x)     // op 1
        if (x == 4) x = 0  // op 2
    }