Attribute 和 Property 的区别

Property 是挂在一个 DOM 节点下，可供 'domNode.某属性'、'domNode["某属性"]' 这种 js 原生getter 访问器，直接访问的属性的集合。可以通过 for in loop 枚举出来：

 

上文可以看出，默认一个 dom 上挂载了很多 Property，这些值可能是你没有设置过的，上文的例子中，这个 input 的 DOM 结构是很简单的：

<input id="input" value="123" />

只有 value 和 id，额外挂载的属性是 DOM 解析的默认行为，这些属性没有设置的话，取到的是有默认值的，例如 ：

 一个节点上，挂那些元素，怎么挂是有标准可以参考的：

HTML 属性参考 - HTML（超文本标记语言） | MDN，不同类型的元素挂的东西是不同的。

用户的自定义属性，是不会解析到 Property 供直接访问，但是可以通过 getAttribute 访问到：

 结论一：Attribute 包含 Property，Property 可以认为是部分 Attribute 在 元素节点上的映射。

---

上文的说法，看起来是映射，它他们之间的改动是否会及时同步？（因为自定义属性在 Property 上反应不出来，这部分内容和自定义属性无关）

映射和同步这个事情要分两种情况考虑：

1. 大部分属性都是能够相互同步的：

 2. 部分属性，不能相互同步，比如 value, selected, checked, muted（这些值都和用户的输入有关）

使用 setAttribute 方法，反向可以同步给 prop

3. 上文说的这些值：value, selected, checked, muted 都和用户的输入有关。当用户输入之后，通过 prop 能取得实时的值，而使用 getAttribute 取到的不是实时的值。

为何要这么设计？用户输入的部分，prop 和 attribute 不同步，我觉得一种解释是有道理的：这对用户重置输入内容很有帮助。

1. prop 为实时的值，attribute 取默认值。

2. setAttribute 改了默认，同步给 prop。

3. 用户输入修改 prop，attribute 给了能还原的便捷机会。

---

其实在 href 路径、className 方面也有些细微的差别，这边不展开讨论了，详情：

Attributes and properties 

---

本文主要是看到 vue 源码中有 mustUseProp，查询资料后写的，留存记录。