在 HTML 内里的 Style 属性他是一个字符串，同时我们可以利用 getAttribute 和 setAttribute 去取得和配置这个属性。可是假如我们用这个 Style 属性，我们就会获得一个 key 和 vaule 的布局。
Href 属性在 HTML 中 href 的 attribute 和 property 的意思就长短常相似的。可是它的 property 是颠末 resolve 过的 url。
好比我们的 href 的值输入的是 “//m.taobao.com”。这个时候前面的 http 可能是 https 协议是按照当前的页面做的，所以这里的 href 就需要编译一遍才气响该当前页面的协议。
做过 http 到 https 改革的同学应该都知道，在让我们的网站利用 https 协议的时候，我们需要把所有写死的 http 可能 https 的 url 都要改成利用 // 。
所以在我们 href 内里写了什么就出来什么的，就是 attribute。假如是颠末 resolve 的就是我们的 property 了。
<a href="https://m.taobao.com" ></a> <script> var a = document.getElementByTagName('a'); // 这个得到的功效就是 "http://m.taobao.com"， 这个 url 是 resolve 过的功效 // 所以这个是 Property a.href; // 而这个得到的是 "https://m.taobao.com", 跟 HTML 代码中完全一致 // 所以这个是 Attribute a.getAttribute('href'); </script>
在上面的代码中我们也可以看到，我们可以同时会见 property 和 attribute。它们的语义固然很是的靠近，可是它们不是一样的对象。
不外假如我们变动了任何一方，城市让别的一方产生改变。这个是需要我们去留意的现象。
Input 和 value这个是最神奇的一对，而 value 也是出格的坑。
我们许多都觉得 property 和 attribute 中的 value 都是完全等效的。其实不是的，这个 attribute 中的 input 的 value 相当于一个 value 的默认值。岂论是用户在 input 中输入了值，照旧开拓者利用 JavaScript 对 input 的 value 举办赋值，这个 input 的 attribute 是不会随着变的。
而在 input 的显示上是会优先显示 property，所以 attribute 中的 value 值就相当于一个默认值罢了。这就是一个很是著名的坑，早期同学们有利用过 JQuery 的话，我们会以为内里的 prop 和 attr 是一样的，没想到在 value 这里就会踩坑。
所以厥后 JQuery 库就出了一个叫 val 的要领，这样我们就不需要去想 attribute 照旧 property 的 value，直接用它提供的 val 取值即可。
这里一方面是一起加强一下 HTML 的 property 和 attribute 的常识。另一方面就是让我们认识到，就算长短常顶级的计较机专家设计的标签系统，也呈现两个差不多的属性不等效的问题。那么假如让我们去设计一个标签系统，我们会让 property 和 attribute 等效照旧不等效呢？ 等进修完整个组件化的常识后，我们一起来答复一下这个问题。
如何设计组件状态这里我们来阐明一下，property、attribute、state、config 在组件设计中都有什么区别。
这里 Winer 老师给我们整理了一个表格，分成了四个场景：
Markup set —— 用标签去配置
JavaScript Set —— 利用 JavaScript 代码去配置
JavaScript Change —— 利用 JavaScript 代码去改变
User Input Change —— 终端用户的输入而改变
Markup set
JavaScript set
JavaSscript Change
User Input Change
❌
✅
✅
❓
property
✅
✅
✅
❓
attribute
❌
❌
❌
✅
state
❌
✅
❌
❌
config
那么我们一个一个来报告一下：
Property
❌ 它是不可以或许被 markup 这种静态的声明语言去配置的
✅ 可是它是可以被 JavaScript 配置和改变的
❓ 大部门环境下 property 是不该该由用户的输入去改变的，可是小数环境下，大概是来历于我们的业务逻辑，才有大概会接管用户输入的改变
Attribute
❓ 用户的输入就不必然会改变它，与 Property 同理
✅ 是可以由 markup，JavaScript 去配置的，同时也是可以被 JavaScript 所改变的
State