理解property和attribute
这个要看具体的语境了。不过我们可以从词源的角度来区分一下这两者:
property
形容词
property的词源可追溯到proper，意为合适的，适当的。
短语示例:
- a proper job 一份合适(自己的)工作
名词
proper加上ty后缀变为名词prproperty，意为特性
短语示例:
- chemical property 化学性质，比如酒精易挥发的化学性质。
attribute
an abstraction belonging to or characteristic of an entity
对实体的抽象或者特征描述。
比如，我们谈论一条鱼这个实体，说这条鱼具有对称性，此时我们的意思是这条鱼具有这个属性，而不是说只有这条鱼具有对称性。
这样总结下来，property是attribute的子集，property代表专属于一个实体的属性。
但是在编码的过程中，程序员总有抽象不完善的情况，这也是为什么property和attribute会混淆的原因。
vue3中的property和attribute
在vue3中property也就是props所定义的一个组件的属性，这些属性会由组件接收，同时在接收的时候会对其进行校验数据类型和值的正确性。
如下一段代码很好地解释了vue3中什么是property：
class User {
_name
set name(name) {
if(!name) {
alert('名称不能为空')
}
this._name = name
}
get name() {
return this._name
}
}
而attribute则更像没人管的野孩子。下面一段介绍是vue3对非prop的attribute的描述:
一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id attribute。可以通过 $attrs property 访问那些 attribute。
xml中的属性节点
html所构成的dom树,元素节点上的attribute的类型是属性节点，也是树的一个level。
dom api在处理这些属性时，如果是对象的property,则会交由对象的property处理器去处理，而如果对象没有相应的property，则会将由xml解析出来的attribute添加到attributes这个属性上去。
vue3.0的attribute强制行为
接触过强类型语言比如Java的都会知道【强制类型转换】这样一个术语。
int i = (int)(1.23);
vue框架在编译模板代码时也会进行类似的【强制类型转换】
模板代码如下:
在vue2中,上述的模板会被渲染为:
在vue3中,上述的模板会被渲染为:
也就是说vue3中没有强制行为，你在模板中看到的就是最终的渲染结果。
源代码分析
function setAttr(el: Element, key: string, value: any, isInPre?: any) {
if (isInPre || el.tagName.indexOf('-') > -1) {
baseSetAttr(el, key, value)
} else if (isBooleanAttr(key)) {
// set attribute for blank value
// e.g.
if (isFalsyAttrValue(value)) {
el.removeAttribute(key)
} else {
// technically allowfullscreen is a boolean attribute for