一，v-model是什么
v-model就是vue的雙向綁定的指令，能將頁面上控件輸入的值同步更新到相關綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控件的值。
二，為什么使用v-model
v-model作為雙向綁定指令也是vue兩大核心功能之一，使用非常方便，提高前端開發效率。在view層，model層相互需要數據交互，即可使用v-model。
三，v-model的原理簡單描述
v-model主要提供了兩個功能，view層輸入值影響data的屬性值，data屬性值發生改變會更新view層的數值變化。以下以input控制綁定v-model舉例說明。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="app"> <p>{{name}}</p> <input type="text" v-model="name" /> </div> </body> </html> 3.1 input 輸入值后更新data
首先在頁面初始化時候，vue的編譯器會編譯該html模板文件，將頁面上的dom元素遍歷生成一個虛擬的dom樹。再遞歸遍歷虛擬的dom的每一個節點。當匹配到其是一個元素而非純文本，則繼續遍歷每一個屬性。
如果遍歷到v-model這個屬性，則會為這個節點添加一個input事件，當監聽從頁面輸入值的時候，來更新vue實例中的data想對應的屬性值。
// 假如node是遍歷到的input節點 node.addEventListener("input",function(e){ vm.name=e.target.value; }) 3.2data的屬性賦值后更新input的值
同樣初始化vue實例時候，會遞歸遍歷data的每一個屬性，並且通過defineProperty來監聽每一個屬性的get，set方法，從而一旦某個屬性重新賦值，則能監聽到變化來操作相應的頁面控制。
Object.defineProperty(data,"name",{ get(){ return data["name"]; }, set(newVal){ let val=data["name"]; if (val===newVal){ return; } data["name"]=newVal; // 監聽到了屬性值的變化,假如node是其對應的input節點 node.value=newVal; } }) 四，總結
其核心就是，一方面modal層通過defineProperty來劫持每個屬性，一旦監聽到變化通過相關的頁面元素更新。另一方面通過編譯模板文件，為控件的v-model綁定input事件，從而頁面輸入能實時更新相關data屬性值。