假设我有这些变量($: 标记一个反应语句,因此当 = 之后的任何值更改时,该变量都会更新):
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;
对于如何解决这个问题有什么建议吗?谢谢。
您可以非反应式地声明变量,并使用反应式效果来更新您的值,其中您明确告诉 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>