在前端工作中经常遇到property 和attribute两个属性，在中文中两者的翻译是相同的，都是翻译为“属性”，很多时候使用过程中二者也经常混淆，其实二者是两个不同的东西。

<-- 以此dom为例子 -->
<input id='test' class='a b c' type='text' value="1234" />

一. 体系不同：DOM VS html

DOM ： 当我们以dom的角度观察这个input时，它是一个dom对象，是的，是一个对象，我们知道每个对象都有它属性值，这些就是property属性，id,type,disabled...这些就是此dom对象的property。

var test = document.querySelector('#test');
// 把test看作一个对象 
test.id       // test
test.type     // button
test.disabled // true
test.size     // 20
...

HTML : 在html中，所有的元素都是标签，我们可以给每个html标签设置相应的属性（attribute），这些属性都保存在test.attributes里面（发现了没，attributes其实也是dom对象的一个property），所以对于这个input标签，上面的id,class,type...等都是attribute属性

var test = document.querySelector('#test');

// 把test看作一个标签,打印它的属性
console.log(test.attributes );
/* NamedNodeMap {0: data-v-230f5a58, 1: name, 2: value, 3: id, 4: disabled, 5: class, data-v-230f5a58: data-v-230f5a58, name: name, value: value, id: id, disabled: disabled, …}
length: 6
0: data-v-230f5a58
1: name
2: value
3: id
4: disabled
5: class
data-v-230f5a58: data-v-230f5a58
name: name
value: value
id: id
disabled: disabled
class: class
__proto__: NamedNodeMap

*/

二. 两者的区别

体系不同：根据上面的测试的结果我们发现，二者是属于两套系统的不同的东西，但其中的属性又有所重合，且attributes本身又是property中的一个属性。所以attribute的属性一般都可以通过property 的方式获取到。

来源不同：在Js 的世界中，对象是通过构造函数创建的，所以每个对象中都天生自带了许多属性（property）, 而attribute则是我们在书写代码时设置的一些属性。

状态不同：状态这个描述可能不太准确，attribute是我们给这个标签设置的属性，类似于这个标签的默认或初始属性值；而property 是这个dom对象或标签现在的属性。以这个input为例，我们设置的初始value值为“1234”，若我们输入了其他值如：“abcd”,此时property: input.value  的值为“abcd”, attribute：input.attributes.value 的值仍为 "1234"。当然不是所以的属性是这样，比如 id, class，type等属性是始终保持一致的。

三 . 胡说一下

<component prop1="1" prop2="2" prop3="3"></component>

在vue中，我们会给组件添加属性，如上图，prop1,prop2既是component标签的attribute，也是component组件对象的props，所以在component组件中，vue提供了我们两种获取的方式供我们选择（注意，只能选择一种），

方法一：默认情况下,即组件中没有设置props属性时，prop1,prop2,prop3属性将都保存在组件的$attrs中,此时这些属性不光存在$attrs中，同时也和我们平常设置在input上的type，class等属性一样，作为标签的属性attribute存在；若你想让某个属性（如prop1）只存在组件对象的$attrs或$props中，而不要成为标签的attribute，可以使用修饰符“prop”即可

<component :prop1.prop="1" prop2="2" prop3="3"></component>

方法二：在组件中配置props属性进行接收，在props中配置的属性将都保存在$props中，同时$attrs 中将不在保留

链接: https://fly63.com/article/detial/8417