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

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

官方文檔這么解釋：

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

如下代碼

<input v-model='txt'>

本質(zhì)上是

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

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

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

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

lazy ：在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步，添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進行同步

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

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

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

number ：將數(shù)據(jù)轉(zhuǎn)化為值類型

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

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