Was ist das Prinzip der bidirektionalen Bindung in Vuejs?

Das Prinzip der bidirektionalen Bindung in Vuejs: Verwendung von Daten-Hijacking und Publish-Subscribe-Modus, Entführung der Setter und Getter jeder Eigenschaft über „Object.defineProperty()“, Veröffentlichung von Nachrichten an Abonnenten, wenn sich die Daten ändern, und Auslösung entsprechender Listening Callbacks und aktualisieren Sie dann die Ansicht.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Prinzip der bidirektionalen Datenbindung von Vue

Vue implementiert die bidirektionale Datenbindung hauptsächlich unter Verwendung von: Daten-Hijacking und Publish-Subscribe-Modus, Verwendung der Methode Object.defineProperty() zur Durchführung von Daten-Hijacking und then notify Der Herausgeber (Themenobjekt) benachrichtigt alle Beobachter. Nachdem die Beobachter die Benachrichtigung erhalten haben, aktualisieren sie die Ansicht. Object.defineProperty() 方法进行的数据劫持，然后通知发布者(主题对象)去通知所有观察者，观察者收到通知后，就会对视图进行更新。

https://jsrun.net/RMIKp/embedded/all/light

MVVM 框架主要包含两个方面，数据变化更新视图，视图变化更新数据。

视图变化更新数据，如果是像 input 这种标签，可以使用 oninput 事件..

数据变化更新视图可以使用 Object.definProperty() 的 set 方法可以检测数据变化，当数据改变就会触发这个函数，然后更新视图。

实现过程

我们知道了如何实现双向绑定了，首先要对数据进行劫持监听，所以我们需要设置一个 Observer 函数，用来监听所有属性的变化。

如果属性发生了变化，那就要告诉订阅者 watcher 看是否需要更新数据，如果订阅者有多个，则需要一个 Dep 来收集这些订阅者，然后在监听器 observer 和 watcher 之间进行统一管理。

还需要一个指令解析器 compile，对需要监听的节点和属性进行扫描和解析。

因此，流程大概是这样的：

• 实现一个监听器 Observer，用来劫持并监听所有属性，如果发生变动，则通知订阅者。

• 实现一个订阅者 Watcher，当接到属性变化的通知时，执行对应的函数，然后更新视图，使用 Dep 来收集这些 Watcher。

• 实现一个解析器 Compile，用于扫描和解析的节点的相关指令，并根据初始化模板以及初始化相应的订阅器。

显示一个 Observer

Observer 是一个数据监听器，核心方法是利用 Object.defineProperty()

https://jsrun.net/RMIKp/embedded/all/light

Das MVVM-Framework umfasst hauptsächlich zwei Aspekte: Datenänderungen aktualisieren die Ansicht und Ansichtsänderungen aktualisieren die Daten.

View-Änderungen aktualisieren Daten. Wenn es sich um eine Tag-ähnliche Eingabe handelt, können Sie das oninput-Ereignis verwenden, um die Ansicht zu aktualisieren Datenänderungen erkennen Wann Diese Funktion wird ausgelöst, wenn sich die Daten ändern, und die Ansicht wird aktualisiert.

Implementierungsprozess

Wir wissen, wie man eine bidirektionale Bindung implementiert. Zuerst müssen wir die Daten entführen und überwachen, also müssen wir eine Beobachterfunktion einrichten, um Änderungen in allen Attributen zu überwachen.

Wenn sich die Attribute ändern, müssen Sie dem Abonnentenbeobachter mitteilen, ob die Daten aktualisiert werden müssen. Wenn mehrere Abonnenten vorhanden sind, benötigen Sie einen Dep, um diese Abonnenten zu sammeln und dann eine einheitliche Verwaltung zwischen dem Beobachter und dem Beobachter durchzuführen. .

Sie benötigen außerdem eine Befehlsparser-Kompilierung, um die Knoten und Attribute zu scannen und zu analysieren, die überwacht werden müssen.

Der Prozess sieht also ungefähr so ​​aus:

Implementieren Sie einen Listener-Observer, um alle Eigenschaften zu kapern und zu überwachen und Abonnenten zu benachrichtigen, wenn Änderungen auftreten.

Implementieren Sie einen Abonnenten-Watcher, wenn Sie eine Benachrichtigung über Eigenschaftsänderungen erhalten, führen Sie die entsprechende Funktion aus, aktualisieren Sie dann die Ansicht und verwenden Sie Dep, um diese Watcher zu sammeln.

Implementieren Sie eine Parser-Kompilierung, mit der die zugehörigen Anweisungen des Knotens gescannt und analysiert werden, und initialisieren Sie den entsprechenden Abonnenten gemäß der Initialisierungsvorlage.

Zeigen Sie einen Beobachter an

Observer ist ein Daten-Listener. Die Kernmethode besteht darin, Object.defineProperty() zu verwenden, um allen Eigenschaften zur Überwachung rekursiv Setter- und Getter-Methoden hinzuzufügen. .

var library = {
  book1: {
    name: "",
  },
  book2: "",
};
observe(library);
library.book1.name = "vue权威指南"; // 属性name已经被监听了，现在值为：“vue权威指南”
library.book2 = "没有此书籍"; // 属性book2已经被监听了，现在值为：“没有此书籍”

// 为数据添加检测
function defineReactive(data, key, val) {
  observe(val); // 递归遍历所有子属性
  let dep = new Dep(); // 新建一个dep
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      if (Dep.target) {
        // 判断是否需要添加订阅者，仅第一次需要添加，之后就不用了，详细看Watcher函数
        dep.addSub(Dep.target); // 添加一个订阅者
      }
      return val;
    },
    set: function(newVal) {
      if (val == newVal) return; // 如果值未发生改变就return
      val = newVal;
      console.log(
        "属性" + key + "已经被监听了，现在值为：“" + newVal.toString() + "”"
      );
      dep.notify(); // 如果数据发生变化，就通知所有的订阅者。
    },
  });
}

// 监听对象的所有属性
function observe(data) {
  if (!data || typeof data !== "object") {
    return; // 如果不是对象就return
  }
  Object.keys(data).forEach(function(key) {
    defineReactive(data, key, data[key]);
  });
}
// Dep 负责收集订阅者，当属性发生变化时，触发更新函数。
function Dep() {
  this.subs = {};
}
Dep.prototype = {
  addSub: function(sub) {
    this.subs.push(sub);
  },
  notify: function() {
    this.subs.forEach((sub) => sub.update());
  },
};

In der Ideenanalyse muss ein Nachrichtenabonnenten-Dep vorhanden sein, der Abonnenten aufnehmen kann, der zum Sammeln von Abonnenten und zum Ausführen der entsprechenden Aktualisierungsfunktion verwendet wird, wenn sich die Attribute ändern.

Aus Code-Sicht wird der Abonnenten-Dep zum Getter hinzugefügt, um den Watcher bei der Initialisierung auszulösen. Daher muss ermittelt werden, ob ein Abonnent erforderlich ist.

Wenn sich im Setter Daten ändern, werden alle Abonnenten benachrichtigt und die Abonnenten aktualisieren dann die entsprechenden Funktionen.

• An diesem Punkt ist ein relativ vollständiger Observer fertiggestellt.
  Implementieren des Watchers🎜🎜Der Abonnenten-Watcher muss sich während der Initialisierung zum Abonnenten-Beobachter hinzufügen Der Watcher-Vorgang wird beim Abrufen ausgeführt. Sie müssen also nur die entsprechende Get-Funktion auslösen, um den entsprechenden Abonnentenvorgang hinzuzufügen, wenn der Watcher initialisiert wird. 🎜🎜Wie löst man Get aus? Da wir Object.defineProperty() bereits festgelegt haben, müssen wir nur den entsprechenden Eigenschaftswert abrufen, um es auszulösen. 🎜🎜Wir müssen den Abonnenten nur dann auf Dep.target zwischenspeichern, wenn der Abonnenten-Watcher initialisiert wird, und ihn dann entfernen, nachdem das Hinzufügen erfolgreich war. 🎜

  function Watcher(vm, exp, cb) {
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    this.value = this.get(); // 将自己添加到订阅器的操作
  }
  
  Watcher.prototype = {
    update: function() {
      this.run();
    },
    run: function() {
      var value = this.vm.data[this.exp];
      var oldVal = this.value;
      if (value !== oldVal) {
        this.value = value;
        this.cb.call(this.vm, value, oldVal);
      }
    },
    get: function() {
      Dep.target = this; // 缓存自己，用于判断是否添加watcher。
      var value = this.vm.data[this.exp]; // 强制执行监听器里的get函数
      Dep.target = null; // 释放自己
      return value;
    },
  };

  🎜Bis jetzt ist das einfache Watcher-Design fertig, und durch die Verknüpfung von Observer und Watcher kann eine einfache Zwei-Wege-Bindung erreicht werden. 🎜🎜Da die Parser-Kompilierung noch nicht entworfen wurde, können die Vorlagendaten zunächst fest codiert werden. 🎜🎜Konvertieren Sie den Code in die Schreibmethode des ES6-Konstruktors und zeigen Sie eine Vorschau an. 🎜🎜https://jsrun.net/8SIKp/embedded/all/light🎜🎜Dieser Code implementiert den Compiler nicht, sondern übergibt die gebundenen Variablen direkt. Wir legen nur ein Datum (Name) auf einem Knoten fest, der gebunden werden soll, und Führen Sie dann ein neues MyVue auf der Seite aus, um eine bidirektionale Bindung zu erreichen. 🎜🎜Und nehmen Sie nach zwei Sekunden Änderungen vor. Sie können sehen, dass sich auch die Seite geändert hat. 🎜

  // MyVue
  proxyKeys(key) {
      var self = this;
      Object.defineProperty(this, key, {
          enumerable: false,
          configurable: true,
          get: function proxyGetter() {
              return self.data[key];
          },
          set: function proxySetter(newVal) {
              self.data[key] = newVal;
          }
      });
  }

  🎜Die Funktion des obigen Codes besteht darin, den Schlüssel von this.data an this zu übergeben, sodass ich this.xx problemlos verwenden kann, um this.data.xx abzurufen. 🎜🎜Kompilieren implementieren🎜🎜Obwohl oben die bidirektionale Datenbindung implementiert ist, analysiert der gesamte Prozess den DOM-Abschnitt nicht, sondern ersetzt ihn fest. Daher besteht der nächste Schritt darin, einen Parser für die Datenanalyse und -bindung zu implementieren. 🎜🎜Implementierungsschritte der Parserkompilierung: 🎜🎜🎜🎜Parsen Sie die Vorlagenanweisungen, ersetzen Sie die Vorlagendaten und initialisieren Sie die Ansicht. 🎜

• 将模板指定对应的节点绑定对应的更新函数，初始化相应的订阅器。

为了解析模板，首先需要解析 DOM 数据，然后对含有 DOM 元素上的对应指令进行处理，因此整个 DOM 操作较为频繁，可以新建一个 fragment 片段，将需要的解析的 DOM 存入 fragment 片段中在进行处理。

function nodeToFragment(el) {
  var fragment = document.createDocumentFragment();
  var child = el.firstChild;
  while (child) {
    // 将Dom元素移入fragment中
    fragment.appendChild(child);
    child = el.firstChild;
  }
  return fragment;
}

接下来需要遍历各个节点，对含有相关指令和模板语法的节点进行特殊处理，先进行最简单模板语法处理，使用正则解析“{{变量}}”这种形式的语法。

function compileElement (el) {
    var childNodes = el.childNodes;
    var self = this;
    [].slice.call(childNodes).forEach(function(node) {
        var reg = /\{\{(.*)\}\}/; // 匹配{{xx}}
        var text = node.textContent;
        if (self.isTextNode(node) && reg.test(text)) {  // 判断是否是符合这种形式{{}}的指令
            self.compileText(node, reg.exec(text)[1]);
        }
        if (node.childNodes && node.childNodes.length) {
            self.compileElement(node);  // 继续递归遍历子节点
        }
    });
},
function compileText (node, exp) {
    var self = this;
    var initText = this.vm[exp];
    updateText(node, initText);  // 将初始化的数据初始化到视图中
    new Watcher(this.vm, exp, function (value) {  // 生成订阅器并绑定更新函数
        self.updateText(node, value);
    });
},
function updateText (node, value) {
    node.textContent = typeof value == 'undefined' ? '' : value;
}

获取到最外层的节点后，调用 compileElement 函数，对所有的子节点进行判断，如果节点是文本节点切匹配{{}}这种形式的指令，则进行编译处理，初始化对应的参数。

然后需要对当前参数生成一个对应的更新函数订阅器，在数据发生变化时更新对应的 DOM。

这样就完成了解析、初始化、编译三个过程了。

接下来改造一个 myVue 就可以使用模板变量进行双向数据绑定了。

https://jsrun.net/K4IKp/embedded/all/light

添加解析事件

添加完 compile 之后，一个数据双向绑定就基本完成了，接下来就是在 Compile 中添加更多指令的解析编译，比如 v-model、v-on、v-bind 等。

添加一个 v-model 和 v-on 解析：

function compile(node) {
  var nodeAttrs = node.attributes;
  var self = this;
  Array.prototype.forEach.call(nodeAttrs, function(attr) {
    var attrName = attr.name;
    if (isDirective(attrName)) {
      var exp = attr.value;
      var dir = attrName.substring(2);
      if (isEventDirective(dir)) {
        // 事件指令
        self.compileEvent(node, self.vm, exp, dir);
      } else {
        // v-model 指令
        self.compileModel(node, self.vm, exp, dir);
      }
      node.removeAttribute(attrName); // 解析完毕，移除属性
    }
  });
}
// v-指令解析
function isDirective(attr) {
  return attr.indexOf("v-") == 0;
}
// on: 指令解析
function isEventDirective(dir) {
  return dir.indexOf("on:") === 0;
}

上面的 compile 函数是用于遍历当前 dom 的所有节点属性，然后判断属性是否是指令属性，如果是在做对应的处理（事件就去监听事件、数据就去监听数据..）

完整版 myVue

在 MyVue 中添加 mounted 方法，在所有操作都做完时执行。

class MyVue {
  constructor(options) {
    var self = this;
    this.data = options.data;
    this.methods = options.methods;
    Object.keys(this.data).forEach(function(key) {
      self.proxyKeys(key);
    });
    observe(this.data);
    new Compile(options.el, this);
    options.mounted.call(this); // 所有事情处理好后执行mounted函数
  }
  proxyKeys(key) {
    // 将this.data属性代理到this上
    var self = this;
    Object.defineProperty(this, key, {
      enumerable: false,
      configurable: true,
      get: function getter() {
        return self.data[key];
      },
      set: function setter(newVal) {
        self.data[key] = newVal;
      },
    });
  }
}

然后就可以测试使用了。

https://jsrun.net/Y4IKp/embedded/all/light

总结一下流程，回头在哪看一遍这个图，是不是清楚很多了。

可以查看的代码地址：Vue2.x 的双向绑定原理及实现

相关推荐：《vue.js教程》

Das obige ist der detaillierte Inhalt vonWas ist das Prinzip der bidirektionalen Bindung in Vuejs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!