javascript - vue如何偵聽change事件實現雙向綁定的？

問題描述

我們用原生的事件偵聽一個input輸入框變化時綁定這么一個事件，這個回調函數執行的條件是輸入框blur之后

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

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

這個是如何做到的？

問題解答

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

vue中的輸入框默認監聽的是input事件，所以輸入就會觸發回調。通過下面這種方式可以改成change中觸發。

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

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

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

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