咨询：Svelte中text/number类型input渲染后无value属性的原因

这本质是Svelte对不同类型表单元素的状态管理逻辑差异：

• 对于text、number这类用户可交互的输入控件：
  Svelte会把你写在标签上的value当作初始值，组件挂载完成后，就会切换到通过DOM的value property来管理输入值，同时移除HTML上的value属性。这么做是为了避免属性（attribute）和属性（property）状态不一致——用户输入会直接修改property的值，如果HTML属性还保留，刷新页面时会用属性值重置输入，和用户预期的运行时状态冲突。所以你在DOM里看不到value属性，但通过element.value能拿到当前的实时值，这才是控件的真实状态。

• 对于hidden类型的input：
  这类控件不可交互，用户无法直接修改其值，Svelte会保持HTML属性和DOM property同步，所以你能在DOM里看到value属性，因为它的状态不会被用户操作改变，不需要区分初始值和运行时值。

举个简单的验证示例：

<input type="text" value="random text" id="testId">
<input type="hidden" value="hidden value" id="hiddenId">

<script>
  import { onMount } from 'svelte';
  
  onMount(() => {
    const textInput = document.getElementById('testId');
    console.log(textInput.value); // 输出"random text"
    console.log(textInput.hasAttribute('value')); // 输出false

    const hiddenInput = document.getElementById('hiddenId');
    console.log(hiddenInput.value); // 输出"hidden value"
    console.log(hiddenInput.hasAttribute('value')); // 输出true
  });
</script>

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