Svelte传递依赖未更新问题咨询:value3未随value1同步更新
问题原因与解释
这是Svelte反应式系统的批次处理机制导致的,相关逻辑在Svelte官方文档的反应式章节有说明。
你的代码里:
- 当
value1更新时,触发$: updateValue2(value1)执行 - 在
updateValue2里同步直接赋值value2 = value,这个修改发生在当前反应式更新批次的执行过程中 - 而
$: updateValue3(value2)的依赖检查是在当前批次开始前完成的,所以它不会在本次批次中被触发——Svelte会把同一批次内的所有反应式更新按顺序处理,同步修改的变量变化不会触发同批次里的后续依赖反应式。
而你注释里的setTimeout能生效,是因为它把value2的赋值推迟到了下一个事件循环,此时当前的反应式批次已经执行完毕,Svelte会在下一轮检查中发现value2的变化,进而触发updateValue3的执行。
正确的写法
不需要用函数包裹,直接用反应式赋值就能实现链式更新:
<script> let value1 = 0; $: value2 = value1; $: value3 = value2; </script> <button on:click={() => value1++}>increment</button> <h1>value1: {value1}, value2: {value2}, value3: {value3}</h1>
如果一定要保留函数逻辑,也可以用更轻量的方式触发新的反应式批次,比如用await Promise.resolve()替代setTimeout:
<script> let value1 = 0; let value2 = 0; let value3 = 0; function updateValue3(value) { value3 = value; } $: updateValue3(value2); async function updateValue2(value) { await Promise.resolve(); // 触发新批次 value2 = value; } $: updateValue2(value1); </script>
内容的提问来源于stack exchange,提问作者Martin Ždila
相关产品推荐
相关产品推荐

