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还是有许多的。
@邓木琴居然被盗用了 这篇文章可以参考下链接描述