Svelte中afterUpdate为何未因textValue更新无限触发？

核心原因和Svelte的响应式更新机制直接相关：

• textValue未在模板中被引用
  Svelte的更新触发逻辑是「只关注模板里用到的变量」。你的代码里textValue仅在脚本中被赋值，但模板里完全没有使用它（比如没有<p>{textValue}</p>这类写法）。所以当你在afterUpdate里修改textValue时，Svelte检测不到这个变量的变化需要更新DOM，自然不会启动新的更新周期，afterUpdate也就不会被再次调用。

• afterUpdate的触发有明确前提
  afterUpdate是在DOM完成更新后才会执行的钩子。它的触发必须满足：当前更新周期确实导致了DOM的变化。如果某个变量的修改没有影响到DOM（比如你这里的textValue），Svelte不会触发新一轮的更新流程，afterUpdate自然不会重复执行。

你可以做个测试验证：把模板改成下面这样，新增对textValue的引用，再点击按钮就会触发无限循环了：

<div>
    <p>{value}</p>
    <p>{textValue}</p>
    <button on:click={()=>value=value+1}>
        increase
    </button>
</div>

此时流程会变成：点击按钮→value变化→DOM更新→afterUpdate执行→修改textValue→textValue在模板里被引用→DOM再次更新→afterUpdate再次执行→又修改textValue→无限循环。

而你原始代码里因为textValue没参与DOM渲染，所以修改它不会触发后续更新，每次点击按钮只会触发一次afterUpdate。

内容的提问来源于stack exchange，提问作者Jiseop Han