Une brève analyse de la liaison de données vue

Avant-propos : Récemment, l'équipe avait besoin de faire un partage, mais je ne savais pas comment le partager. Enfin, je pensais que j'avais toujours voulu étudier le code source de vue, et j'ai juste "saisi cette opportunité" pour l'étudier aujourd'hui.

Il y a déjà beaucoup d'articles sur la liaison de données Vue sur Internet, mais l'écrire soi-même, taper une démo et lire les articles d'autres personnes sont complètement différents, alors... Les porteurs arrivent

Actuellement, il existe trois manières principales d'implémenter la liaison de données :

1. Vérification des valeurs sales (angular.js) Interrogation pour détecter les modifications de données

Les événements DOM, tels que la saisie de texte par les utilisateurs, en cliquant sur des boutons, etc. (ng-click)

Événement de réponse XHR ($http)

Événement de changement d'emplacement du navigateur ($location)

Événement de minuterie ($timeout, $interval)

Exécutez $digest() ou $apply()

2. Object.defineProperty détourne le get et l'ensemble de l'objet pour surveiller les données. (vue)

3. Le mode éditeur/abonné réalise la synchronisation automatique des données et des vues

Avantages d'Object.defineProperty

"Détection de valeur sale" - modifications des données Enfin, un un test est effectué sur la relation de liaison entre toutes les données et toutes les vues pour identifier si des données ont été modifiées. Le traitement de toute modification peut entraîner des modifications supplémentaires dans d'autres données, de sorte que ce processus peut être répété plusieurs fois jusqu'à ce qu'il ne soit plus modifié. les données sont envoyées à la vue et la page est mise à jour pour afficher

Object.defineProperty() Surveillez les opérations sur les données et déclenchez automatiquement la synchronisation des données. De plus, puisque la synchronisation est déclenchée sur différentes données, les modifications peuvent être envoyées avec précision à la vue liée au lieu d'effectuer un test sur toutes les données.

Utilisation de Object.defineProperty

var a = {};

Object.defineProperty(a, "b", {

 set: function (newValue) {

 console.log("我被赋值了！" + newValue);

 },

 get: function () {

 console.log("我被取值了！");

 return 2
 }
})

a.b = 3; //我被赋值了！

console.log(a.b); //我被取值了! //打印 2

Comme le montre l'exemple ci-dessus, Object.defineProperty transmet 3 paramètres

Le premier : un objet

deuxième : b attribut dans un objet

troisième : plus d'attributs, listant la valeur utile, défini, obtenu, configurable

liaison de données Principe déterminé :

1. Implémentez un observateur d'écoute de données pour surveiller tous les attributs de l'objet de données. S'il y a un changement, obtenez la dernière valeur et informez le tableau dep

2. Implémentez une instruction L'analyseur compile analyse et analyse les instructions de chaque nœud d'élément et remplace les données selon le modèle d'instruction

3. Implémentez un tableau dep qui peut s'abonner et recevoir des notifications de chaque changement d'attribut et exécuter la liaison d'instructions La fonction de rappel correspondante met à jour le vue

1. Implémenter l'observateur

var data = {name: 'beidan'};

observe(data);

data.name = 'test'; // 监听到值变化了 beidan 变成 test

function observe(data) {

 if (!data || typeof data !== 'object') {

 return;

 }

 // 取出所有属性遍历

 Object.keys(data).forEach(function(key) {

  defineReactive(data, key, data[key]);

 });
}

function defineReactive(data, key, val) {


 Object.defineProperty(data, key, {

 enumerable: true, // 可枚举

  configurable: false, // 不能再define
  get: function() {
 
   return val;

  },

  set: function(newVal) {
 
   console.log('监听到值变化了 ', val, ' 变成 ', newVal);

   val = newVal;

  }

 });
}

2. Maintenir un tableau

function Dep() {

 this.subs = [];
}

Dep.prototype = {

 addSub: function (sub) {

 this.subs.push(sub);

 },

 notify: function (val) {

  this.subs.forEach(function (sub) {
 
  sub.update(val)

 });

}
};
function defineReactive(data, key, val) {
 Object.defineProperty(data, key, {
 ……
 set: function(newVal) {
  if (val === newVal) return;
  console.log('监听到值变化了 ', val, ' 变成 ', newVal);
  val = newVal;
  dep.notify(val); // 通知所有订阅者
 }
 });
}

3. compiler

bindText: function () {

 var textDOMs = this.el.querySelectorAll('[v-text]'),
bindText,_context = this;


 for (var i = 0; i < textDOMs.length; i++) {
 
 bindText = textDOMs[i].getAttribute(&#39;v-text&#39;);
 textDOMs[i].innerHTML = this.data[bindText];

 var val = textDOMs[i]


 var up = function (text) {
 
  val.innerText = text

 }

 _context.dep.addSub({
 
  value: textDOMs[i],
 
  update: up

 });

 }
},

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter une certaine aide aux études ou au travail de chacun. du temps, j'espère aussi soutenir le site PHP chinois !

Pour plus d'articles sur la liaison de données Vue, veuillez faire attention au site Web PHP chinois !