Einführung in die Methode zur Verwendung von Proxy zur Implementierung der bidirektionalen Bindung (Code)

Dieser Artikel bietet Ihnen eine Einführung (Code) zur Verwendung von Proxy, um eine bidirektionale Bindung zu erreichen. Ich hoffe, dass er für Sie hilfreich ist.

Vorwort: vue3.0 verwendet Proxy, um die bidirektionale Bindung zu implementieren. Probieren wir also zuerst die Implementierungsmethode aus.

1 Object.defineProperty-Implementierung

Die ursprüngliche Implementierung von vue2 verwendet Object.defineProperty, um den Satz zu überwachen, aber die direkte Subskription des Arrays zum Festlegen des Werts kann nicht überwacht werden.

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) {
  observe(val); // 监听子属性
  Object.defineProperty(data, key, {
      enumerable: true, // 可枚举
      configurable: false, // 不能再重写defineProperty
      get: function() {
          return val;
      },
      set: function(newVal) {
          console.log('-------通知订阅者--------')
          val = newVal;
      }
  });
}

2 Verwenden Sie Proxy zur Implementierung

Das Prinzip der Verwendung von Proxy zur Implementierung besteht hauptsächlich darin, ein neues Proxy-Objekt als Proxy für Ihren Datenwert zu erstellen Das für die Array-Methode In Bezug auf den Betrieb gibt es zwei Zuweisungsvorgänge, einen zum Hinzufügen eines Werts und einen zum Ändern seines Längenwerts. Für Array-Indizes, die nicht von Object.defineProperty überwacht werden können, kann der Proxy ihn überwachen.

function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    // 取出所有属性遍历
    Object.keys(data).forEach(function(_k) {
        // Proxy不允许绑定在非对象上
        if (data[_k] && typeof data[_k] === 'object') {
            data[_k] = defineReactive(data[_k]);
        }
    });
}

function defineReactive(data) {
  return new Proxy(data, {
    set(target, key, value, proxy) {
        // 进行数组操作时，会进行两次set 一次数据改变，一次length改变，两次改变data的值是不变，因此不应该多分发一次消息
      if (
        Object.prototype.toString.call(data) === "[object Array]" &&
        key === "length"
      ) {
        Reflect.set(target, key, value, proxy);
        return true;
      }
      observe(data);
      Reflect.set(target, key, value, proxy);
      console.log('-------通知订阅者--------')
      return true;
    }
  });

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Tutorial-Video auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Verwendung von Proxy zur Implementierung der bidirektionalen Bindung (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!