作為 attribute 和 property 的 value 及 Vue.js 的相關處理

attribute 和 property 是 Web 開發中，比較容易混淆的概念，而對於 value，因其特殊性，更易困惑，本文嘗試做一下梳理和例證

attribute 和 property 的概念

簡單的說，attribute 是元素標簽的屬性，property 是元素對象的屬性，例如：

<input id="input" value="test value">
<script>
let input = document.getElementById('input');
console.log(input.getAttribute('value')); // test value
console.log(input.value); // test value
</script>

• input 的 value attribute 是通過標簽里的 value="test value" 定義的，可以通過 input.getAttribute('value') 獲取，可以通過 input.setAttribute('value', 'New Value') 更新
• input 的 value property 可通過 input.value 獲取和更新，初始值是與 attribute 中的賦值一致的

attribute 和 property 的綁定

如果在最開始的時候，更新 attribute value 的值，property 的值也會隨之改變

但是更新 property value 的值（在文本框輸入或給 input.value 賦新值 ），attribute 的值不會隨之改變，而且此時再更新 attribute 的值，property 的值也不再隨之改變，如此動畫所示，也可訪問此頁面嘗試進行操作

這其實是臟值標記（dirty value flag）在起作用，dirty value flag 的初始值為 false，即 attribute value 的更新默認會改變對應的 property value，但是一旦用戶交互修改了 property value，dirty value flag 的值就變為 true，即attribute value 的更新就不會改變對應的 property value 了

所以在實際項目中，我們一般都是在處理作為 property 的 value

Vue.js 對 value 的處理

一般情況使用 :value

Vue.js 的 v-bind，一般情況下是在處理 attribute，如果要作為 property 處理的話，需要加上 .prop

不過 v-bind:value 卻大都默認為處理 property 值，因為被強制轉化了，例如：

<input id="input" :value="'test value'" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let input = new Vue({
  el: '#input',
  mounted () {
    console.log(this.$el.getAttribute('value')); // null
    console.log(this.$el.value); // test value
    console.log(this._vnode.data) // {attrs: {id: "input"}, domProps: {value: "test value"}}
  }
});
</script>

可見，Vue.js 將 value 作為 VNode 的 data 中的 domProps 的屬性，而不是 attrs 的屬性，所以掛載后會成為作為 property 的 value

在 Vue.js 源碼中，強制轉化 property 的處理如下：

// src/compiler/parser/index.js
function processAttrs (el) {
...
        if ((modifiers && modifiers.prop) || (
          !el.component && platformMustUseProp(el.tag, el.attrsMap.type, name)
        )) {
          addProp(el, name, value, list[i], isDynamic)
        } else {
          addAttr(el, name, value, list[i], isDynamic)
        }

其中 platformMustUseProp 在 web 平台的定義如下：

// src/platforms/web/util/attrs.js
const acceptValue = makeMap('input,textarea,option,select,progress')
export const mustUseProp = (tag: string, type: ?string, attr: string): boolean => {
  return (
    (attr === 'value' && acceptValue(tag)) && type !== 'button' ||
    (attr === 'selected' && tag === 'option') ||
    (attr === 'checked' && tag === 'input') ||
    (attr === 'muted' && tag === 'video')
  )
}

由上可知，類型不為 button 的 input, textarea, option, select, progress 的 value 會強制作為 property，而不需要設置為 :value.prop

例如 textarea 標簽，其本身其實並不支持 value attribute，所以以下代碼中的 value 的值並不會顯示在多行文本框中

<textarea value="test value"></textarea>

但是在 Vue.js 中， 以下代碼能成功綁定到 value property 並顯示在多行文本框中

<textarea :value="'test value'"></textarea>

特殊情況使用 :value.prop

以上 Vue.js 源碼需要注意的還有，強制作為 property， 還要滿足 !el.component，即不為動態組件，因為動態組件的 el.component 的值為其 is attribute 的值

即動態組件的的 v-bind 默認都是作為 attribute的，如果要作為 property，就要使用 .prop，例如：

<div id="app">
  <component :is="element" :value.prop="'test value'"></component>
  <button @click="change">Change</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
  el: '#app',
  data: {
    element: 'input'
  },
  methods: {
    change () {
      this.element = 'input' === this.element ? 'textarea' : 'input';
    }
  }
});
</script>

如果以上 component 中，刪除 :value.prop 的 .prop，切換到 textarea 時，其值就不會顯示在多行文本框中，可以在此頁面點擊切換標簽查看

總結

• 作為 attribute 和 property 的 value 的綁定關系會在用戶交互更新值后失效
• Vue.js 一般使用 :value 即可讓 value 作為 property
• Vue.js 動態模版需要使用 :value.prop 才可讓 value 作為 property