Svelte文本框输入长度检测异常 响应式变量计算错误问题求助

问题根因 #

1. 执行顺序冲突：同一个<textarea>上同时绑定on:input和bind:value时，Svelte会优先执行on:input的回调函数，之后才会更新绑定的变量t的值。因此你在check()函数中读取的响应式变量l（基于t计算）永远是上一次的旧值，和实际输入长度不一致。
2. 冗余打印逻辑：当前check()无论长度是否大于5都会执行一次console.log(l)，如果l>5还会额外多打印一次，容易干扰结果判断。

修复方案 #

方案1：响应式触发校验（推荐，符合Svelte设计范式） #

移除textarea的on:input绑定，直接通过响应式声明触发校验，只要l更新就自动执行校验逻辑，完全规避执行顺序问题：

<script>
let t = ''
$: l = t.length
// 响应式调用：l变更时自动触发check
$: check(l)
    
function check(currentLength) {
    if (currentLength > 5) {
        console.log('超出长度限制，当前长度：', currentLength)
    }
    console.log('当前输入长度：', currentLength)
}
</script>

<h1>Am I a good Svelte dev?</h1>
<p>My code:</p>
<textarea bind:value={t} />
<p>{l} chars. {l>240?'NOPE':'I ❤️ Svelte'}.</p>

方案2：从事件对象直接读取实时值 #

如果需要保留on:input绑定，可直接从事件对象中获取当前输入的内容，不需要等待响应式变量更新：

<script>
let t = ''
$: l = t.length
    
function check(e) {
    const currentLength = e.target.value.length
    if (currentLength > 5) {
        console.log('超出长度限制，当前长度：', currentLength)
    }
    console.log('当前输入长度：', currentLength)
}
</script>

<h1>Am I a good Svelte dev?</h1>
<p>My code:</p>
<textarea on:input={check} bind:value={t} />
<p>{l} chars. {l>240?'NOPE':'I ❤️ Svelte'}.</p>

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