javascript - Wie hört Vue auf Change-Ereignisse, um eine bidirektionale Bindung zu implementieren?

Question

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?

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