Comment l'applet détecte-t-elle les données via la montre et le calcul

Dans Vue, calculé est une propriété calculée, similaire à un filtre, qui traite les données liées à la vue et écoute les modifications. Pour surveiller des types de données complexes, Watch doit utiliser une surveillance approfondie. Ces deux éléments peuvent détecter les modifications de données lors de la vue. Contrairement à Vue, l'applet WeChat peut utiliser la surveillance et le calcul pour apporter les modifications correspondantes. Seule la fonction this.setData() de l'applet peut détecter les données, donc chaque fois que les modifications des données dans l'applet doivent être détectées, la fonction doit être exécutée manuellement. De plus, l'applet peut également associer ces deux fonctions pour détecter les modifications de données.

Vue implémente la détection des modifications de données via Object.defineProperty. L'injection de toutes les opérations de liaison dans le setter de la variable peut entraîner des modifications dans d'autres données lorsque la variable change. En fait, l'implémentation dans un petit programme est plus simple que dans vue, car pour l'objet dans data, vue doit lier récursivement chaque variable de l'objet pour le rendre réactif. Mais dans l'applet WeChat, qu'il s'agisse d'un objet ou d'un type de base, il ne peut être modifié que via this.setData(). De cette façon, nous n'avons besoin que de détecter les changements dans la valeur de la clé dans les données au lieu de la clé dans. la valeur clé.

Code de test :

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) } })
},
})

Nous devons maintenant implémenter les méthodes de surveillance et calculées pour que lorsque le test change, test1, test2 et test3 changent également. À cet effet, un bouton est ajouté. Lorsque vous cliquez sur ce bouton, le test change. La méthode

watch est relativement simple. Nous définissons d'abord une fonction pour détecter les changements :

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
},
})
}

Ensuite, parcourons les objets transmis par la fonction watch et appelons la méthode

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

<🎜. pour chaque clé. > Le paramètre ici est fn, qui est la valeur de test dans la méthode watch ci-dessus. Ici, la méthode est enveloppée dans une couche et liée au contexte.

Regardons calculé. C'est un peu plus compliqué car nous ne pouvons pas savoir quelle variable des données dépend du calcul, nous ne pouvons donc parcourir que chaque variable des données.

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)
}

Expliquez ce code en détail. Tout d'abord, appelez la méthode définirReactive pour chaque attribut des données. Calculez ensuite la première valeur de chaque attribut calculé, qui est test2 et test3 dans l'exemple ci-dessus.

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

Ici, nous appelons respectivement les valeurs de test2 et test3, combinons la valeur de retour et la valeur clé correspondante dans un objet, puis appelons setData(), afin que ces deux valeurs soient calculées pour la première fois, nous utilisons ici la méthode de réduction. test2 et test3 dépendent tous deux de test, donc lorsque test change, les fonctions correspondantes dans test2 et test3 doivent être appelées dans sa fonction setter, et ces deux variables sont définies via setData.

Mini Program Store Fournit plus de mini-programmes en ligne

déclare une variable pour enregistrer toutes les fonctions qui doivent être exécutées lors du changement et exécute chaque fonction lorsqu'elle est définie parce que. la valeur de this.data.test n'a pas changé pour le moment, utilisez setTimeout pour l'exécuter à nouveau au tour suivant. Maintenant, la question se pose de savoir comment ajouter des fonctions aux sous-marins. Je ne sais pas si vous vous souvenez encore des deux lignes de code en réduction que nous avons mentionnées ci-dessus. Parce que lorsque les valeurs calculées de test1 et test2 sont calculées pour la première fois, la méthode getter de test sera appelée. C'est une bonne opportunité d'injecter la fonction dans les sous-marins, de déclarer une variable $target sur les données et d'attribuer la fonction. fonction qui doit être exécutée. Donnez cette variable, afin que vous puissiez juger s'il y a une valeur cible sur les données dans le getter, afin que vous puissiez les pousser dans les sous-marins. Il convient de noter que vous devez définir la cible sur null immédiatement.

Jusqu'à présent, la montre a été implémentée et calculée, mais ce n'est pas encore fini, il y a un problème. Lorsque vous utilisez les deux en même temps, la clé de l'objet dans watch existe également dans data, donc Object.defineProperty sera appelé à plusieurs reprises sur la variable, et cette dernière écrasera la précédente. Parce que ce n'est pas comme vue où l'ordre d'appel des deux peut être déterminé, nous recommandons d'écrire d'abord calculated puis watch, afin que la valeur calculée puisse être surveillée.

Recommandé : "

Tutoriel de développement de mini-programmes"

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!