javascript - Comment Vue écoute-t-il l'événement Change pour implémenter une liaison bidirectionnelle?

Question

Nous utilisons des événements natifs pour écouter les modifications dans une zone de saisie et lier un tel événement. La condition pour l'exécution de cette fonction de rappel est après que la zone de saisie soit floue

.

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

Mais les frameworks tels que Vue.js et React.js ne nécessitent pas de flou pour déclencher la fonction de rappel pour l'entrée liée à l'événement de changement. Au lieu de cela, chaque entrée en temps réel déclenchera le rappel, tout comme l'événement onpropertychange d'IE.

Comment cela se fait-il ?

Answer 1

Mais les frameworks tels que Vue.js et React.js ne nécessitent pas de flou pour déclencher la fonction de rappel pour l'entrée liée à l'événement de changement. Au lieu de cela, chaque entrée en temps réel déclenchera le rappel, tout comme l'événement onpropertychange d'IE. Comment cela se fait-il ?

La zone de saisie dans vue écoute l'événement d'entrée par défaut, donc l'entrée déclenchera un rappel. Vous pouvez le modifier pour déclencher le changement de la manière suivante.

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

Answer 2

En fait, il existe toujours une surveillance des événements DOM au bas du niveau du framework. Par exemple, la zone de saisie que vous avez mentionnée surveille les événements d'entrée, mais le framework Vue n'a pas besoin d'écrire des opérations dans les événements d'entrée (bien qu'il le puisse). être écrit) et convertit automatiquement les modifications du DOM en modifications du modèle de données.

J'ai récemment fait un partage sur gitchat, vous pouvez le consulter ici. JavaScript avancé : compréhension approfondie de la liaison de données bidirectionnelle

Answer 3

Selon votre question, vous souhaitez connaître le principe de mise en œuvre de la liaison bidirectionnelle de Vue. Il existe encore de nombreux articles de ce type dans SF.
@Dengmuqin a en fait été volé. Pour cet article, veuillez vous référer à la description du lien ci-dessous

.