一，v-model是什么
v-model就是vue的雙向綁定的指令，能將頁面上控件輸入的值同步更新到相關綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控件的值。
二，為什么使用v-model
v-model作為雙向綁定指令也是vue兩大核心功能之一，使用非常方便，提高前端開發(fā)效率。在view層，model層相互需要數(shù)據(jù)交互，即可使用v-model。
三，v-model的原理簡單描述
v-model主要提供了兩個功能，view層輸入值影響data的屬性值，data屬性值發(fā)生改變會更新view層的數(shù)值變化。以下以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的每一個節(jié)點。當匹配到其是一個元素而非純文本，則繼續(xù)遍歷每一個屬性。
??如果遍歷到v-model這個屬性，則會為這個節(jié)點添加一個input事件，當監(jiān)聽從頁面輸入值的時候，來更新vue實例中的data想對應的屬性值。
// 假如node是遍歷到的input節(jié)點
node.addEventListener("input",function(e){
vm.name=e.target.value;
})
3.2data的屬性賦值后更新input的值
??同樣初始化vue實例時候，會遞歸遍歷data的每一個屬性，并且通過defineProperty來監(jiān)聽每一個屬性的get，set方法，從而一旦某個屬性重新賦值，則能監(jiān)聽到變化來操作相應的頁面控制。
Object.defineProperty(data,"name",{
get(){
return data["name"];
},
set(newVal){
let val=data["name"];
if (val===newVal){
return;
}
data["name"]=newVal;
// 監(jiān)聽到了屬性值的變化,假如node是其對應的input節(jié)點
node.value=newVal;
}
})
四，總結
??其核心就是，一方面modal層通過defineProperty來劫持每個屬性，一旦監(jiān)聽到變化通過相關的頁面元素更新。另一方面通過編譯模板文件，為控件的v-model綁定input事件，從而頁面輸入能實時更新相關data屬性值。
