Ausführliche Erklärung zur Verwendung von watch in Vue.js

In diesem Artikel wird hauptsächlich die Verwendung von $watch in Vue vorgestellt.js Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und es als Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen

Ich habe in den letzten zwei Tagen viel über $watch in Vue.js gelernt, und es ist sehr wichtig, deshalb werde ich heute ein paar Anmerkungen hinzufügen.

GitHub-Quellcode

Observer, Watcher, VM kann man als die wichtigeren Teile von Vue bezeichnen . Nach dem Erkennen von Datenänderungen ist Ansicht ein wichtiger Teil der Aktualisierung . Schauen wir uns an, wie man eine einfache $watch-Funktion implementiert. Natürlich verwendet Vue viele Optimierungsmethoden, die in diesem Artikel nicht einzeln besprochen werden.

Beispiel:

// 创建 vm
let vm = new Vue({
 data: 'a'
})

// 键路径
vm.$watch('a.b.c', function () {
 // 做点什么
})

Erklären Sie zunächst ihre Beziehung in dieser Demo und Vue:

Nachdem vm $watch aufruft, ruft es zuerst die Beobachtungsfunktion auf Erstellen Sie eine Observer-Instanz, um Daten zu beobachten, und der Observer erstellt eine Dep, die zur Verwaltung von Abonnenten verwendet wird. Erstellen Sie dann eine Watcher-Instanz, um die Aktualisierungsfunktion bereitzustellen. Sobald sich die Daten ändern, wird die Callback-Funktion Schicht für Schicht ausgeführt.

Beobachter und beobachten

Rekursiv

Rufen Sie die Beobachtungsfunktion auf, um einen Beobachter zu erstellen. Verwenden Sie beim Erstellen eines Observers die Funktion Object.defineProperty(), um ihm die Funktion get set hinzuzufügen und eine Dep-Instanz zu erstellen.

export function observe (val) {
 if (!val || typeof val !== 'object') {
  return
 }
 return new Observer(val)
}

Sie fragen sich vielleicht, was zum Teufel Dep.target ist?

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von watch in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!