Wie erkennt das Applet Daten durch Überwachung und Berechnung?

In Vue ist „computed“ eine berechnete Eigenschaft, ähnlich einem Filter, der die an die Ansicht gebundenen Daten verarbeitet und auf Änderungen wartet. Um komplexe Datentypen zu überwachen, muss Watch eine umfassende Überwachung verwenden. Beide können Änderungen in Daten auf Vue erkennen. Im Gegensatz zu Vue kann das WeChat-Applet Watch und Compute verwenden, um entsprechende Änderungen vorzunehmen. Nur die Funktion this.setData() im Applet kann Daten erkennen. Daher muss die Funktion jedes Mal manuell ausgeführt werden, wenn Datenänderungen im Applet erkannt werden müssen. Darüber hinaus kann das Applet auch diese beiden Funktionen anhängen, um Datenänderungen zu erkennen.

Vue implementiert die Erkennung von Datenänderungen über Object.defineProperty. Das Einfügen aller Bindungsvorgänge in den Setter der Variablen kann zu Änderungen in anderen Daten führen, wenn sich die Variable ändert. Tatsächlich ist die Implementierung in einem kleinen Programm einfacher als in Vue, da Vue für das Objekt in Daten jede Variable im Objekt rekursiv binden muss, damit es reagiert. Aber im WeChat-Applet kann es, egal ob es sich um ein Objekt oder einen Basistyp handelt, nur über this.setData() geändert werden. Auf diese Weise müssen wir nur Änderungen im Schlüsselwert in den Daten erkennen, nicht im Schlüssel der Schlüsselwert.

Testcode:

Page({
data: {
test: { a: 123 },
test1: \'test1\',
},
onLoad() {
computed(this, {
test2: function() {
returnthis.data.test.a + \'2222222\'
},
test3: function() {
returnthis.data.test.a + \'3333333\'
}
})
watch(this, {
test:function(newVal) {
console.log(\'invoke watch\')
this.setData({test1: newVal.a + \'11111111\' })
}
})
},
changeTest() {
this.setData({ test:{ a: Math.random().toFixed(5) } })
},
})

Jetzt müssen wir die Überwachungs- und Berechnungsmethoden implementieren, damit sich bei Teständerungen auch test1, test2 und test3 ändern. Aus diesem Grund wird eine Schaltfläche hinzugefügt. Wenn Sie auf diese Schaltfläche klicken, ändert sich der Test. Die

watch-Methode ist relativ einfach. Zuerst definieren wir eine Funktion zum Erkennen von Änderungen:

function defineReactive(data, key, val, fn) {
Object.defineProperty(data, key, {
configurable: true,
enumerable: true,
get: function() {
return val
},
set: function(newVal){
if (newVal === val)return
fn &&fn(newVal)
val = newVal
},
})
}

Dann iterieren wir über die von der Watch-Funktion übergebenen Objekte und rufen die Methode

function watch(ctx, obj) {
Object.keys(obj).forEach(key => {
defineReactive(ctx.data, key, ctx.data[key], function(value) {
obj[key].call(ctx,value)
})
})
}

Der Parameter hier ist fn, der der Wert von test in der obigen Überwachungsmethode ist. Hier ist die Methode in eine Ebene eingebunden und an den Kontext gebunden.

Sehen wir uns die Berechnung an. Dies ist etwas komplizierter, da wir nicht wissen können, welche Variable in den Daten von der Berechnung abhängt, sodass wir nur jede Variable in den Daten durchlaufen können.

function computed(ctx, obj) {
let keys =Object.keys(obj)
let dataKeys =Object.keys(ctx.data)
dataKeys.forEach(dataKey => {
defineReactive(ctx.data, dataKey, ctx.data[dataKey])
})
let firstComputedObj =keys.reduce((prev, next) => {
ctx.data.$target =function() {
ctx.setData({[next]: obj[next].call(ctx) })
}
prev[next] =obj[next].call(ctx)
ctx.data.$target =null return prev
}, {})
ctx.setData(firstComputedObj)
}

Erklären Sie diesen Code im Detail. Rufen Sie zunächst die Methode defineReactive für jedes Attribut in den Daten auf. Berechnen Sie dann den ersten Wert jedes Attributs in der Berechnung, im obigen Beispiel test2 und test3.

computed(this, {
test2: function() {
returnthis.data.test.a + \'2222222\'
},
test3: function() {
returnthis.data.test.a + \'3333333\'
}
})

Hier rufen wir die Werte von test2 bzw. test3 auf, kombinieren den Rückgabewert und den entsprechenden Schlüsselwert zu einem Objekt und rufen dann setData() auf, damit diese beiden Werte berechnet werden Zum ersten Mal verwenden wir die Reduce-Methode. Sowohl test2 als auch test3 hängen vom Test ab. Wenn sich der Test ändert, müssen die entsprechenden Funktionen in test2 und test3 in ihrer Setter-Funktion aufgerufen werden, und diese beiden Variablen werden über setData festgelegt.

Mini Program Store Bietet mehr Online-Miniprogramme

deklariert eine Variable, um alle Funktionen zu speichern, die beim Ändern ausgeführt werden müssen, und führt jede Funktion aus, wenn sie festgelegt wird Der Wert von this.data.test hat sich zu diesem Zeitpunkt nicht geändert. Verwenden Sie setTimeout, um ihn in der nächsten Runde erneut auszuführen. Nun stellt sich die Frage, wie man Funktionen zu Subs hinzufügt. Ich weiß nicht, ob Sie sich noch an die beiden oben erwähnten Codezeilen in Reduce erinnern. Denn wenn die berechneten Werte von test1 und test2 zum ersten Mal berechnet werden, wird die Getter-Methode von test aufgerufen. Dies ist eine gute Gelegenheit, die Funktion in subs einzufügen, eine $target-Variable für Daten zu deklarieren und zuzuweisen Geben Sie diese Variable an, damit Sie beurteilen können, ob es einen Zielwert für Daten im Getter gibt, damit Sie ihn in Subs verschieben können. Beachten Sie, dass Sie das Ziel sofort auf Null setzen müssen.

Bisher wurde die Überwachung implementiert und berechnet, aber es ist noch nicht vorbei, es gibt ein Problem. Wenn beide gleichzeitig verwendet werden, ist der Schlüssel des überwachten Objekts auch in den Daten vorhanden, sodass Object.defineProperty wiederholt für die Variable aufgerufen wird und die spätere die vorherige überschreibt. Da es nicht wie bei Vue ist, die Reihenfolge des Aufrufs der beiden zu bestimmen, empfehlen wir, zuerst „Computed“ und dann „Watch“ zu schreiben, damit der Wert in „Computed“ beobachtet werden kann.

Empfohlen: „

Mini-Tutorial zur Programmentwicklung“

Das obige ist der detaillierte Inhalt vonWie erkennt das Applet Daten durch Überwachung und Berechnung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!