property和attribute(property和attribute区别)
因为在学习Web Components，需要复习一下property和attribute。这两个属性有明显的区别，在写原生的时候更需要注意，在Web Components框架内其实也会严格区分，只是平时我们很少在意。
property和attribute都可以翻译为属性，有时候把attribute翻译为特性，但不是相同的东西。这两者分别对应jQuery的prop()和attr()方法。
attribute
<input type="text" id="input" /> 复制代码
attribute是html标签上声明的属性，如上面<input>就有两个attribute，分别是type和id。
attribute只能是字符串，如果传入对象则会变成[object Object]。且对大小写不敏感。
通过js的getAttribute()和setAttribute()方法可以存取attribute。通过attributes属性可以获取定义的属性。
property
property是DOM对象上的属性。
<input type="text" id="input" /> <script> document.querySelector('#input').type // text </script> 复制代码可以直接通过DOM对象的属性访问。
property和attribute的关系
1. property会同步attribute的值。
attribute可看成property的初始化。attribute可以使用一些自定义的属性，但是property不会同步这些属性（这些属性可以在attributes上找到）。如果给attribute一些规范之外的值，如<input type="abc" />，则property不会同步这些值，而会设置为默认值，有一个修正的作用。
attribute会映射到property的同名属性上，并且有“绑定”的效果。
这一点不能反过来，即修改property不会引起attribute的变化。
2. 不管更改property还是attribute，都能引起页面的更新。
3. 在某些情况下，attribute也能同步property的值，如id，href。
4. attribute与property的名称不是一一对应，有一些特殊情况。如class -> className。
Vue中的property和attribute
在Vue中通过DOM向元素传值，需要分为两种情况。
一是向Vue组件传值。这种情况下，传递的都是组件props。与property和attribute关系不大。
<article title="文章标题" /> 复制代码
二是向原生的HTML元素（包括Web Components）传值。这是直接写在模板上的，因此是attribute。但Vue中提供了一个方法可以向原生元素传递property。
<!-- attribute --> <input type="text" /> <!-- property --> <input :type.prop="'text'"> 复制代码
因此，在Vue中使用Web Components，向组件传值，如果是传递attribute，则需要注意参数名称对大小写不敏感，写不能传字符串之外的格式，Web Components组件也应该把attribute参数名设计成小驼峰；如果是传递property，则使用v-bind.prop的方式；还有一种情况需要注意，如果Web Components的attribute名是Vue的关键字（比如key），则不可能会传递成功，应该是将其设计成property，通过v-bind.prop的方式传递。
React中的property和attribute
与在Vue中类似，但没有提供一个直接从JSX模板上绑定property的方法。可以通过ref来修改property。所以一般在React中使用Web Components，会将Web Components包装成React组件，将attribute当成property传入React.createElement。
还有一点区别是，React对attribute是大小写敏感的，这也方便将attribute转换成property。
作者：零剑X
链接：https://juejin.cn/post/7029206287447490597