我学习到的Vue2.6的prop修饰符

看一下这段代码

ini 复制代码

// support .foo shorthand syntax for the .prop modifier
if (process.env.VBIND_PROP_SHORTHAND && propBindRE.test(name)) {
  (modifiers || (modifiers = {})).prop = true
  name = `.` + name.slice(1).replace(modifierRE, '')
}

这段代码是Vue 2.6的源码关于处理.prop修饰符的简写语法。它的作用是支持使用.foo这样的简写语法来表示.prop修饰符。在Vue中，.prop修饰符用于强制将属性作为DOM属性绑定，而不是作为属性设置（即使用element[attr]而不是setAttribute）。

让我们分解这段代码：

process.env.VBIND_PROP_SHORTHAND：这是一个环境变量条件，用于控制是否启用这个简写语法。在Vue 2.6中，这个特性默认是启用的。
propBindRE.test(name)：propBindRE是一个正则表达式，用于检测属性名是否以.开头。如果属性名以.开头，则进入条件内部。
(modifiers || (modifiers = {})).prop = true：这行代码确保modifiers对象存在（如果不存在则创建一个空对象），然后设置modifiers.prop为true，表示这个绑定使用了.prop修饰符。
name = '.' + name.slice(1).replace(modifierRE, '')：这行代码修改了name变量。它首先去掉属性名开头的.（通过slice(1)），然后使用modifierRE正则表达式移除可能存在的其他修饰符（例如，.sync等），最后再在开头添加一个.。即此时已移除其他修饰符。这样做的目的是将简写的属性名转换为标准的属性名，并移除其他修饰符，因为.prop修饰符已经被提取到modifiers对象中。

通过一个场景来理解这段代码：

假设我们在模板中这样写：

ini 复制代码

<div .foo="someValue"></div>

这里，我们使用了简写语法.foo，它实际上等同于v-bind:foo.prop，即强制将foo作为DOM属性绑定。

当解析到这个属性时，name的初始值是字符串".foo"。

propBindRE.test(name)会返回true，因为字符串以.开头。
然后，代码会设置modifiers.prop = true。
接着，name被重新赋值：首先去掉开头的.得到"foo"，然后移除其他修饰符（这里没有其他修饰符，所以不变），最后再在开头加上.，得到".foo"。但是注意，这里实际上并没有改变属性的本质，因为后面还会根据这个name进行处理。

但是，实际上在Vue的编译过程中，这个属性最终会被处理成一个绑定对象，其中包含name和modifiers。然后，在生成代码时，会根据修饰符生成相应的代码。例如，如果有prop修饰符，则会使用el.setAttribute(propName, value)而不是el[propName] = value（实际上，Vue使用不同的函数来处理DOM属性和属性）。

注意：在Vue 2.6中，这个简写语法并不是官方文档中明确推荐的写法，而是源码中支持的一种内部写法。通常，我们会在模板中明确地使用v-bind:foo.prop。

与v-model的区别

v-model是双向绑定，它实际上同时使用了v-bind和v-on。而.prop修饰符只是单向绑定（从数据到视图），但注意，如果绑定的是可写的property，并且用户输入会更新该property，那么它可能会表现出双向绑定的效果（例如，绑定input元素的value property）。

关键概念解释

Attribute vs Property

Attribute (特性) ：是HTML标签上定义的静态值，初始设置后不会改变
Property (属性) ：是DOM对象上的动态JavaScript属性，会随着用户交互而变化

.prop修饰符的作用

.prop修饰符告诉Vue将数据绑定到DOM元素的property而不是attribute上。这意味着：

当使用:value.prop="textValue"时，textValue会直接绑定到input元素的value property
这不同于默认的attribute绑定，后者只设置初始值

何时使用Property绑定

需要绑定到DOM元素的JavaScript属性时（如value、disabled、checked等）
需要响应式更新元素属性时
处理布尔属性时（如disabled、checked等）
绑定自定义DOM属性时

何时使用Attribute绑定

需要设置HTML标签的初始特性时
绑定data-*属性时
需要兼容旧浏览器或特殊场景时

以下是一些常见的需要绑定到property而不是attribute的属性：

value：对于表单元素（如input、textarea、select），value属性是动态的，而value attribute通常是初始值。
checked：对于复选框（checkbox）和单选按钮（radio），checked attribute只能设置初始是否选中，而checked property可以动态更新。
selected：对于option元素，selected attribute设置初始选中状态，而selected property可以动态更新。
disabled：对于表单元素，disabled attribute设置初始禁用状态，而disabled property可以动态更新。
innerHTML：用于设置元素的HTML内容，只能作为property使用（Vue中提供了v-html指令，其底层就是使用innerHTML property）。
textContent：用于设置元素的文本内容，与innerHTML类似，但不会解析HTML字符串。
className：用于设置元素的class，attribute是class，而property是className。
style：虽然可以通过attribute设置样式字符串，但property是一个样式对象，可以更方便地操作。
href：对于a标签，href attribute是字符串，而href property是解析后的完整URL。
src：对于img、iframe等元素，src attribute是相对或绝对路径字符串，而src property是解析后的完整URL。
nodeValue：对于文本节点，用于设置或获取文本内容。
tabIndex：设置元素的tab顺序，作为property时可以是数字，而attribute是字符串。
contentEditable：设置元素是否可编辑，作为property时是布尔值，而attribute是字符串（"true"或"false"）。
readOnly：对于表单元素，readonly attribute设置初始只读状态，而readOnly property可以动态更新（注意大小写，property是readOnly，attribute是readonly）。
multiple：对于select元素，multiple attribute设置是否多选，而multiple property可以动态更新。

注意：在Vue中，我们通常使用v-bind绑定attribute，但对于上述一些属性，有时我们需要使用.prop修饰符来绑定到property。然而，Vue为一些特殊情况提供了语法糖，例如：

对于value属性，通常使用v-model来实现双向绑定，它实际上绑定的是value property并监听input事件。
对于checked属性，复选框和单选按钮也使用v-model。
对于disabled、selected等，Vue的模板绑定通常足够智能，但有时可能需要显式使用.prop。

另外，Vue 2.6+提供了.prop修饰符的简写，即使用点号（.）开头的属性名，例如：

这将会绑定到DOM元素的myProperty property上。