为什么Svelte对value属性有特殊处理？是否可以关闭该特性？

特殊处理的原因 #

Svelte的这个设计是为了适配浏览器原生DOM的运行逻辑：

• 对于<progress>、<input>、<select>这类内置交互元素，HTML的value 属性（attribute） 和DOM对象的value 属性（property） 是两个独立的概念：attribute仅负责定义元素的初始值，后续用户交互或JS修改property的时候，attribute不会同步更新。
• 如果Svelte统一用attr()方法设置value，动态绑定的value值更新时，页面视图不会同步变化，无法满足响应式开发的需求。
• 因此Svelte内部预设了一组特殊属性列表（包含value、checked、indeterminate等交互相关属性），对这类属性默认直接操作DOM对象的property，保证响应式更新可以正常生效。

关闭特殊处理的方法 #

你可以通过Svelte内置的attribute:修饰符，强制要求对应属性走attribute设置逻辑，而非默认的property赋值：

<!-- 给value添加attribute:前缀修饰，编译时会和max属性走相同的attr()逻辑 -->
<progress attribute:value="50" max="100"/>

该写法编译后的处理逻辑和普通属性完全一致，可以解决对应的适配问题。目前Svelte没有提供全局关闭该特性的配置项，仅需要针对要特殊处理的元素单独添加修饰符即可。

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