在前端开发中，attribute 和 property 的区别常被误解，尤其是对于 input 元素的 value 属性，其行为更易引发混淆。本文将深入解析两者在 DOM 中的交互逻辑，并结合 Vue.js 框架的实现机制进行说明。

基础概念：attribute 与 property

• attribute 是元素标签中的声明项，如 <input value="initial">。
• property 是对应 DOM 元素对象的属性，可通过 element.value 访问。

示例代码如下：

<input id="input" value="initial text">
<script>
const el = document.getElementById('input');
console.log(el.getAttribute('value')); // "initial text"
console.log(el.value);                 // "initial text"

el.value = 'updated via JS';
console.log(el.getAttribute('value')); // "initial text"（未更新）
console.log(el.value);                 // "updated via JS"
</script>

可见，初始时 attribute 与 property 值一致。但一旦通过脚本修改了 value property，attribute 就不再同步更新，这种现象由"脏值标记"（dirty flag）控制。

脏值标记机制

当用户输入或脚本直接赋值给 element.value 时，框架会设置一个内部标志位，表明该值已"脏化"，此后即使再修改 attribute，也不会影响 property。这确保了用户输入不会被外部属性覆盖。

Vue.js 中的 value 处理策略

在 Vue.js 模板中，v-bind:value 默认被编译为 property 绑定，而非 attribute。原因在于其内部对特定标签和属性的强制处理。

1. 自动作为 property 绑定

对于以下标签：input、textarea、select、option、progress，且类型不是 button，Vue 会自动将其 value 视为 domProps，而不是 attrs。

例如：

<template>
  <input :value="text" />
</template>

<script>
new Vue({
  data() {
    return { text: 'Hello World' }
  },
  mounted() {
    console.log(this.$el.getAttribute('value')); // null
    console.log(this.$el.value);                // "Hello World"
  }
});
</script>

此时，value 不出现在 attrs 中，而是作为 domProps 存储在虚拟节点中。

2. 内部判断逻辑

此行为由源码中的 platformMustUseProp 控制：

// src/platforms/web/util/attrs.js
const acceptValue = makeMap('input,textarea,option,select,progress');

export const mustUseProp = (tag, type, attr) => {
  return (
    (attr === 'value' && acceptValue(tag)) && type !== 'button' ||
    (attr === 'selected' && tag === 'option') ||
    (attr === 'checked' && tag === 'input') ||
    (attr === 'muted' && tag === 'video')
  );
};

这意味着这些标签的 value 属性会被强制绑定为 DOM property。

3. 动态组件场景下的特殊处理

当使用 <component :is="..." /> 动态组件时，情况不同。由于动态组件的 el.component 会读取 is 属性，此时所有 v-bind 会默认按 attribute 处理，除非显式添加 .prop 修饰符。

示例：

<div id="app">
  <component :is="currentTag" :value.prop="message" />
  <button @click="toggle">切换类型</button>
</div>

<script>
new Vue({
  data() {
    return {
      currentTag: 'input',
      message: 'Dynamic Value'
    }
  },
  methods: {
    toggle() {
      this.currentTag = this.currentTag === 'input' ? 'textarea' : 'input';
    }
  }
});
</script>

若省略 .prop，在切换到 textarea 时，value 将作为 attribute 传递，而 textarea 不支持 value attribute，导致内容无法显示。

总结

• value 的 attribute 与 property 在用户交互后失去联动关系。
• Vue.js 对常见表单元素的 value 自动处理为 domProps，无需额外修饰。
• 在动态组件中，必须使用 :value.prop 才能确保 value 作为 property 正确绑定。
• 理解这一机制有助于避免数据绑定失效问题，提升应用稳定性。