Qu'est-ce que l'abonné à liaison bidirectionnelle de Vue ?

Dans Vue.js, la liaison de données bidirectionnelle est l'une de ses caractéristiques les plus importantes et distinctives. Les technologies de base pour la mise en œuvre de la liaison de données bidirectionnelle sont le suivi des dépendances et les modèles de publication/abonnement. Dans Vue.js, un objet appelé Watcher joue un rôle très important. Son rôle est de notifier la couche de vue des modifications de données et d'assurer la synchronisation des données et des vues.

Cependant, Watcher lui-même n'est pas une entité indépendante, mais est créé en Dep (c'est-à-dire l'abonné). La relation entre eux est similaire aux observateurs et aux sujets dans le modèle publication/abonnement.

Alors, que signifient-ils chacun ?

Watcher : Observateur, chargé de s'abonner aux modifications des données. Une fois les données modifiées, il déclenche une opération de mise à jour et notifie à la couche de vue de restituer.

Dep : Sujet, centre de données, responsable de la gestion de tous les Watchers et de la notification aux Watchers de mettre à jour lorsque les données changent.

Vous vous souvenez de la liaison de données que nous avons utilisée dans Vue.js ?

<template>
  <div>
    <input type="text" v-model="message">
    <h2>{{ message }}</h2>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        message: 'Hello Vue!'
      }
    }
  }
</script>

Dans cet exemple, nous lions les données message à l'élément <input>, et les lions également de manière synchrone à <h2> > élément. C'est ainsi que la liaison bidirectionnelle Vue.js est utilisée. <code>message绑定到<input>元素中，而且还同步地绑定到了<h2>元素上。这就是Vue.js双向绑定的用法。

当我们运行这个应用时，Vue.js开始执行模板编译，分析模板中的指令，建立DOM节点和Watcher的关系图。

也就是说，在<input>元素上建立一个Watcher对象，它将侦听message数据的变化，并立即更新到视图层。

在这个过程中，Dep订阅器的作用就体现出来了。在message

Lorsque nous exécutons cette application, Vue.js commence à effectuer la compilation du modèle, analyse les instructions du modèle et établit un diagramme de relation entre les nœuds DOM et Watcher.

En d'autres termes, créez un objet Watcher sur l'élément <input>, qui écoutera les modifications dans les données message et le mettra immédiatement à jour dans la couche de vue. 🎜🎜Dans cette démarche, le rôle de l'abonné Dep se reflète. Lorsque les données du message changent, elles informeront tous les objets Watcher d'effectuer des opérations de mise à jour et les laisseront restituer la vue. 🎜🎜En général, l'abonné Dep est un composant très important dans le framework Vue.js. Il fonctionne en étroite collaboration avec l'objet Watcher pour compléter la technologie de base de liaison de données bidirectionnelle dans Vue.js. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!