一瞻想，v-model是什么
v-model就是vue的雙向綁定的指令咆耿，能將頁面上控件輸入的值同步更新到相關(guān)綁定的data屬性，也會在更新data綁定屬性時(shí)候故硅，更新頁面上輸入控件的值庶灿。
二，為什么使用v-model
v-model作為雙向綁定指令也是vue兩大核心功能之一吃衅，使用非常方便往踢，提高前端開發(fā)效率。在view層捐晶，model層相互需要數(shù)據(jù)交互菲语，即可使用v-model妄辩。
三，v-model的原理簡單描述
v-model主要提供了兩個(gè)功能山上，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
??首先在頁面初始化時(shí)候哮伟，vue的編譯器會編譯該html模板文件，將頁面上的dom元素遍歷生成一個(gè)虛擬的dom樹妄帘。再遞歸遍歷虛擬的dom的每一個(gè)節(jié)點(diǎn)楞黄。當(dāng)匹配到其是一個(gè)元素而非純文本，則繼續(xù)遍歷每一個(gè)屬性抡驼。
??如果遍歷到v-model這個(gè)屬性鬼廓，則會為這個(gè)節(jié)點(diǎn)添加一個(gè)input事件，當(dāng)監(jiān)聽從頁面輸入值的時(shí)候致盟，來更新vue實(shí)例中的data想對應(yīng)的屬性值碎税。
// 假如node是遍歷到的input節(jié)點(diǎn)
node.addEventListener("input",function(e){
vm.name=e.target.value;
})
3.2data的屬性賦值后更新input的值
??同樣初始化vue實(shí)例時(shí)候，會遞歸遍歷data的每一個(gè)屬性馏锡，并且通過defineProperty來監(jiān)聽每一個(gè)屬性的get雷蹂，set方法，從而一旦某個(gè)屬性重新賦值杯道，則能監(jiān)聽到變化來操作相應(yīng)的頁面控制匪煌。
Object.defineProperty(data,"name",{
get(){
return data["name"];
},
set(newVal){
let val=data["name"];
if (val===newVal){
return;
}
data["name"]=newVal;
// 監(jiān)聽到了屬性值的變化,假如node是其對應(yīng)的input節(jié)點(diǎn)
node.value=newVal;
}
})
四，總結(jié)
??其核心就是党巾，一方面modal層通過defineProperty來劫持每個(gè)屬性萎庭，一旦監(jiān)聽到變化通過相關(guān)的頁面元素更新。另一方面通過編譯模板文件昧港，為控件的v-model綁定input事件擎椰，從而頁面輸入能實(shí)時(shí)更新相關(guān)data屬性值。
