與js或者jquery直接改變操作dom不同，vue使用v-model實現數據的雙向綁定，它會根據控件類型自動選取正確的方法來更新元素。

v-model就是vue的雙向綁定的指令，能將頁面上控件輸入的值同步更新到相關綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控件的值

官方文檔這么解釋：

v-model只不過是一個語法糖而已,真正的實現靠的還是

如下代碼

<input v-model='txt'>

本質上是

<input :value='txt' @input='txt = $event.target.value'>解釋：

初始化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層通過Object.defineProperty來劫持每個屬性，一旦監聽到變化通過相關的頁面元素更新。另一方面通過編譯模板文件，為控件的v-model綁定input事件，從而頁面輸入能實時更新相關data屬性值

那么Object.defineProperty是用來控制一個對象屬性的一些特有操作，比如讀寫權、是否可以枚舉，這里我們主要先來研究下它對應的兩個描述屬性get和set，v-model其實是對其get和set進行重寫操作，get就是在讀取name屬性這個值觸發的函數，set就是在設置name屬性這個值觸發的函數

v-model修飾符：.lazy、.trim和.number

lazy ：在每次 input 事件觸發后將輸入框的值與數據進行同步，添加 lazy 修飾符，從而轉變為使用 change 事件進行同步

<input v-model.lazy='msg'>

trim ：去除字符串首尾的空格

<input v-model.trim='msg'>

number ：將數據轉化為值類型

<input v-model.number='msg'>

到此這篇關于淺談vue實現雙向事件綁定v-model的原理的文章就介紹到這了,更多相關vue 雙向事件綁定v-model內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！