Svelte组件中为何需显式设置input.value？绑定value为何不足？

在以下range.svelte组件中，当input元素已通过<input value={value}...>绑定value时，为何必须在第24行执行inputElement.value = valueToSet;？仅在第27行将value赋值为valueToSet为何不足以更新输入框的显示内容？
背景说明：需求是禁止用户在number类型输入框中输入超出指定范围的数值。

<script lang="ts">
    import { RangeSlider } from '@skeletonlabs/skeleton';

    export let value: number;
    export let suffix: string;
    export let min: number;
    export let max: number;

    export let name: string;
    export let step: number = 1;

    let clazz: string = ""

    export {clazz as class};

    function onInputChanged(event: Event): void {
        const inputElement = event.target;

        const newValue = inputElement.value;

        const valueToSet = computeValueToSet(newValue);

        value = valueToSet
        inputElement.value = valueToSet;
    }

    function computeValueToSet(newValue: string): number {
        if (newValue === "") {
            return value;
        }

        const newInt = parseInt(newValue, 10);

        const isInRange = min <= newInt && newInt <= max;
        if (!isInRange) {
            return value;
        }

        return newInt;
    }
</script>

<div class="flex flex-row gap-4 {clazz}" {...$$restProps}>
    <RangeSlider name={name} class="basis-3/4" bind:value {min} {max} {step}>
        <span class="flex justify-between">
            <span class="text-xs">{min}{suffix}</span>
            <span class="text-xs">{max}{suffix}</span>
        </span>
    </RangeSlider>
    <span class="basis-1/4 flex flex-row gap-1 items-center">
        <input
            class="input text-sm w-auto"
            type="number"
            value={value}
            on:input={onInputChanged}
            {min}
            {max}
            {step}
        />
        <span>{suffix}</span>
    </span>
</div>

核心原因拆解 #

• Svelte响应式更新的异步特性：当你在onInputChanged中执行value = valueToSet时，Svelte不会立刻将值同步到DOM。它会把这次更新加入异步队列，等当前事件处理函数执行完毕、事件循环结束后才触发DOM更新。这会导致用户输入的非法值短暂显示在输入框中，体验有延迟。

• number输入框的原生行为限制：浏览器number类型输入框默认允许输入超出min/max范围的内容——原生校验仅在表单提交时提示，不会阻止输入动作。你的computeValueToSet逻辑在输入非法值时返回原有合法value，但此时输入框的DOM值已经是用户输入的非法内容，仅修改value变量无法即时修正显示。

• 单向绑定的局限性：这里用的是单向绑定（value={value}）而非双向绑定（bind:value）。单向绑定仅在value变量变化时更新输入框DOM值，用户输入不会自动反向同步到value——你是通过on:input手动处理同步的。当用户输入非法值时，计算出的valueToSet是原合法值，仅修改value变量无法实时覆盖DOM中的非法输入，必须手动设置inputElement.value来即时修正。

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