javascript - How does vue listen to the change event to implement two-way binding?

Question

We use native events to listen to an input box and bind such an event when it changes. The condition for the execution of this callback function is after the input box is blurred

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

But frameworks such as Vue.js and React.js do not require blur to trigger the callback function for the input bound to the change event. Instead, each real-time input will trigger the callback, just like IE's onpropertychange event.

How is this done?

Answer 1

But frameworks such as Vue.js and React.js do not require blur to trigger the callback function for the input bound to the change event. Instead, each real-time input will trigger the callback, just like IE's onpropertychange event. How is this done?

The input box in vue listens to the input event by default, so input will trigger a callback. You can change it to trigger in change in the following way.

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

Answer 2

In fact, there is still monitoring of DOM events at the bottom of the framework level. For example, the input input box you mentioned monitors input events, but the Vue framework does not need to write operations in the input events (although it can be written), and automatically converts DOM changes into Changes to the data model.

I recently made a sharing on gitchat, you can check it out here. Advanced JavaScript: In-depth understanding of two-way data binding

Answer 3

According to your question, you want to know the implementation principle of Vue’s two-way binding. There are still many such articles in SF.
@Dengmuqin has actually been stolen. For this article, please refer to the link description below