問(wèn)題描述

我們用原生的事件偵聽(tīng)一個(gè)input輸入框變化時(shí)綁定這么一個(gè)事件，這個(gè)回調(diào)函數(shù)執(zhí)行的條件是輸入框blur之后

el.addEventListener(’change’, function(e){ console.log(e.target.value);})

但是 Vue.js 和 React.js這類(lèi)框架對(duì)于綁定change事件的input并不需要blur才會(huì)觸發(fā)回調(diào)函數(shù)，而是每一次實(shí)時(shí)輸入就會(huì)觸發(fā)回調(diào)，就像IE的onpropertychange事件一樣。

這個(gè)是如何做到的？

問(wèn)題解答

但是 Vue.js 和 React.js這類(lèi)框架對(duì)于綁定change事件的input并不需要blur才會(huì)觸發(fā)回調(diào)函數(shù)，而是每一次實(shí)時(shí)輸入就會(huì)觸發(fā)回調(diào)，就像IE的onpropertychange事件一樣。 這個(gè)是如何做到的？

vue中的輸入框默認(rèn)監(jiān)聽(tīng)的是input事件，所以輸入就會(huì)觸發(fā)回調(diào)。通過(guò)下面這種方式可以改成change中觸發(fā)。

<input v-model.lazy='msg' >回答2：

其實(shí)框架層面底層還是有對(duì)DOM事件的監(jiān)聽(tīng)，比如你說(shuō)的input輸入框監(jiān)聽(tīng)了input事件，只是Vue框架不需要在input事件中去寫(xiě)操作(雖然可以寫(xiě))，自動(dòng)將DOM變動(dòng)轉(zhuǎn)換成了數(shù)據(jù)模型的變動(dòng)。

最近在gitchat上做一場(chǎng)分享，可以看看這里。JavaScript 進(jìn)階之深入理解數(shù)據(jù)雙向綁定

根據(jù)你的問(wèn)題你是想了解vue的雙向綁定實(shí)現(xiàn)原理，這類(lèi)文章SF還是有許多的。@鄧木琴居然被盜用了 這篇文章可以參考下鏈接描述