Lit中value=${"Hello"}与.value=${"Hello"}语法有何区别

两种写法对应完全不同的底层绑定逻辑，测试时效果一致只是特定场景下的结果重合，两者并不等价。

• 无点写法value=${xxx}属于 HTML Attribute（标签属性）绑定：Lit渲染时会调用DOM元素的setAttribute('value', xxx)方法，传入的值会被强制序列化为字符串，最终写到HTML标签的属性位上。
• 带点写法.value=${xxx}属于 DOM Property（对象属性）绑定：Lit渲染时会直接给DOM节点的JS对象属性赋值，等价于执行原生JS的inputElement.value = xxx，不会做字符串序列化，支持传入任意类型的值。

你测试时看不到差异，是因为input元素的value attribute本身有特殊行为：浏览器仅在元素初始化解析的时候，会读取标签上的value attribute值，同步写入DOM对象的value property。如果你的测试场景满足「首次渲染、this.itemCount是数字/字符串这类可被正常序列化的简单类型、后续this.itemCount不会更新」这几个条件，两种写法的渲染结果确实完全一致。

一旦脱离这个场景，两者的表现会有明显区别：

1. 传非字符串类型值时：如果传入对象、数组这类非基础类型值，attribute绑定会把值强制转成"[object Object]"这类无意义字符串，property绑定会原样保留值的类型，不会做转换。
2. 绑定值更新时：attribute绑定只会修改HTML标签上的属性值，不会同步更新输入框当前显示的内容。比如this.itemCount从1更新为2，用.value绑定的输入框会直接显示2；用无点value绑定的话，虽然DOM标签上的value属性确实变成了2，但输入框可视区域仍然显示旧值1，状态完全不同步。
3. 用户交互后状态不一致：用户手动在输入框输入内容时，修改的是DOM对象的value property，不会反向更新标签上的value attribute。这时候如果用attribute绑定，后续重渲染很容易出现状态错乱、冲掉用户输入的问题，而property绑定会始终和组件状态保持同步。

Lit官方示例里用.value的写法，就是因为这才是给表单元素赋值的正确方式，不要因为首次渲染效果一致就混用两种写法，否则后续状态更新时很容易出现难排查的bug。

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