作為 attribute 和 property 的 value 及 Vue.js 的相關處理
- 2020 年 4 月 6 日
- 筆記
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 的值，property 的值也會隨之改變
但是更新 property 的值（在文本框輸入或給 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
以上源碼需要注意的還有，強製作為 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
