如何解决并发依赖变化？

Question

假设我有这些变量（$: 标记一个反应语句，因此当 = 之后的任何值更改时，该变量都会更新）：

let x = 0;
$: y = x;
$: z = x + y;

function onSomeUserInteraction(input) {
   y = input;
}

所以在这种情况下，

x

是一个自变量，同时

y

取决于

x

，并且也可以通过用户交互来改变。并且

z

取决于

x

和

y

。

现在我的问题是，当

x

发生变化时，这会触发

z

中的更新。但由于

y

依赖于

x

，它也会发生变化，从而触发对

z

的另一个冗余更新。所以我的问题是，如何处理这些依赖关系，使得更改

x

不会更新

z

两次？显而易见的解决方案就是拥有

$: z = x + x

。但问题在于用户交互，这可能会改变

y

的值，因此

y

可能并不总是等于

x

。

另一种重构代码的方法是这样的：

let x = 0;
$: y = x + i; // I is some arbitrary value that can be updated by the user
$: z = x + y;

对于如何解决这个问题有什么建议吗？谢谢。

Answer 1

您可以非反应式地声明变量，并使用反应式效果来更新您的值，其中您明确告诉 Svelte 哪个变量触发该效果，如下所示：

<script>
    let x = 0;
    $: y = x;
    let z = x + y;

    // If `y` changes, update `z`. 
    $: y, z = x + y;
    
  /* This way `x` doesn't update `z` directly, 
   instead it reactively updates `y` 
   which in turn triggers the `z` update */
    
    function onSomeUserInteraction(input) {
        y = input;
    }
</script>