Was ist der bidirektionale verbindliche Abonnent von Vue?

In Vue.js ist die bidirektionale Datenbindung eines der wichtigsten und charakteristischsten Merkmale. Die Kerntechnologien für die Implementierung der bidirektionalen Datenbindung sind Abhängigkeitsverfolgung und Publish/Subscribe-Muster. In Vue.js spielt ein Objekt namens Watcher eine sehr wichtige Rolle. Seine Aufgabe besteht darin, die Ansichtsebene über Datenänderungen zu informieren und die Synchronisierung von Daten und Ansichten sicherzustellen.

Der Watcher selbst ist jedoch keine unabhängige Einheit, sondern wird in Dep (also dem Abonnenten) erstellt. Die Beziehung zwischen ihnen ähnelt den Beobachtern und Themen im Veröffentlichungs-/Abonnentenmuster.

Was bedeuten sie also jeweils?

Beobachter: Beobachter, verantwortlich für das Abonnieren von Datenänderungen. Sobald sich die Daten ändern, wird ein Aktualisierungsvorgang ausgelöst und die Ansichtsebene zum erneuten Rendern benachrichtigt.

Abteilung: Thema, Rechenzentrum, verantwortlich für die Verwaltung aller Beobachter und die Benachrichtigung der Beobachter zur Aktualisierung, wenn sich Daten ändern.

Erinnern Sie sich an die Datenbindung, die wir in Vue.js verwendet haben?

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

In diesem Beispiel binden wir die Datennachricht message an das Element <input> und binden sie auch synchron an <h2> > Element. Auf diese Weise wird die bidirektionale Bindung von Vue.j verwendet. <code>message绑定到<input>元素中，而且还同步地绑定到了<h2>元素上。这就是Vue.js双向绑定的用法。

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

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

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

Wenn wir diese Anwendung ausführen, beginnt Vue.js mit der Vorlagenkompilierung, analysiert die Anweisungen in der Vorlage und erstellt ein Beziehungsdiagramm zwischen DOM-Knoten und Watcher.

Mit anderen Worten: Erstellen Sie ein Watcher-Objekt für das <input>-Element, das auf Änderungen in den message-Daten wartet und diese sofort auf der Ansichtsebene aktualisiert. 🎜🎜In diesem Prozess spiegelt sich die Rolle des Dep-Abonnenten wider. Wenn sich die message-Daten ändern, werden alle Watcher-Objekte benachrichtigt, Aktualisierungsvorgänge durchzuführen und ihnen die Möglichkeit zu geben, die Ansicht neu zu rendern. 🎜🎜Im Allgemeinen ist der Dep-Abonnent eine sehr wichtige Komponente im Vue.js-Framework. Er arbeitet eng mit dem Watcher-Objekt zusammen, um die Kerntechnologie der bidirektionalen Datenbindung in Vue.js zu vervollständigen. 🎜

Das obige ist der detaillierte Inhalt vonWas ist der bidirektionale verbindliche Abonnent von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!