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