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

Question

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

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

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

這個是如何做到的？

Answer 1

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

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

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

Answer 2

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

最近在gitchat上做分享，可以看看這裡。 JavaScript 進階之深入理解資料雙向綁定

Answer 3

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