Wir verwenden native Ereignisse, um ein Eingabefeld abzuh?ren und ein solches Ereignis zu binden, wenn es sich ?ndert. Die Bedingung für die Ausführung dieser Rückruffunktion ist, dass das Eingabefeld unscharf ist
el.addEventListener('change', function(e){
console.log(e.target.value);
})
Frameworks wie Vue.js und React.js erfordern jedoch keine Unsch?rfe, um die Rückruffunktion für die an das ?nderungsereignis gebundene Eingabe auszul?sen. Stattdessen l?st jede Echtzeiteingabe den Rückruf aus, genau wie das onpropertychange-Ereignis des IE. Wie geht das?
但是 Vue.js 和 React.js這類框架對于綁定change事件的input并不需要blur才會觸發(fā)回調(diào)函數(shù),而是每一次實時輸入就會觸發(fā)回調(diào),就像IE的onpropertychange事件一樣。 這個是如何做到的?
vue中的輸入框默認監(jiān)聽的是input事件,所以輸入就會觸發(fā)回調(diào)。通過下面這種方式可以改成change中觸發(fā)。
<input v-model.lazy="msg" >
其實框架層面底層還是有對DOM事件的監(jiān)聽,比如你說的input輸入框監(jiān)聽了input事件,只是Vue框架不需要在input事件中去寫操作(雖然可以寫),自動將DOM變動轉(zhuǎn)換成了數(shù)據(jù)模型的變動。
最近在gitchat上做一場分享,可以看看這里。JavaScript 進階之深入理解數(shù)據(jù)雙向綁定
根據(jù)你的問題你是想了解vue的雙向綁定實現(xiàn)原理,這類文章SF還是有許多的。
@鄧木琴居然被盜用了 這篇文章可以參考下鏈接描述