v-model主要提供了兩個功能，view層輸入值影響data的屬性值，data屬性值發(fā)生改變會更新view層的數(shù)值變化。以下以input控制綁定v-model舉例說明。

<div id="app">
       <p>{{name}}</p>
       <input type="text" v-model="name" />
       <!-- 相當于 -->
       <input v-bind:value="name" v-on:input="$event.target.value" />
   </div>

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;
    })  

data的屬性賦值后更新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;
        }    
    })

我們在 vue 項目中主要使用 v-model 指令在表單 input、textarea、select 等元素上創(chuàng)建雙向數(shù)據(jù)綁定，我們知道 v-model 本質上不過是語法糖，v-model 在內部為不同的輸入元素使用不同的屬性并拋出不同的事件：
text 和 textarea 元素使用 value 屬性和 input 事件；
checkbox 和 radio 使用 checked 屬性和 change 事件；
select 字段將 value 作為 prop 并將 change 作為事件。