問題描述

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

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

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

這個是如何做到的？

問題解答

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

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

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

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

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

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