Introduction à la méthode d'utilisation du proxy pour implémenter la liaison bidirectionnelle (code)

Cet article vous apporte une introduction (code) sur la méthode d'utilisation du proxy pour obtenir une liaison bidirectionnelle. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Avant-propos : vue3.0 utilise Proxy pour implémenter la liaison bidirectionnelle, essayons donc d'abord la méthode d'implémentation.

1 Implémentation d'Object.defineProperty

L'implémentation originale de vue2 utilise Object.defineProperty pour surveiller l'ensemble, mais l'indice direct du tableau pour définir la valeur ne peut pas être surveillé.

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 Utilisez Proxy pour implémenter

Le principe principal de l'utilisation de Proxy est de créer un nouvel objet Proxy pour proxy la valeur de vos données. que pour les tableaux Pour les opérations de méthode, deux opérations d'affectation se produiront, l'une consiste à ajouter une valeur et l'autre à modifier sa valeur de longueur. Pour les indices de tableau qui ne peuvent pas être surveillés par Object.defineProperty, le proxy peut surveiller l'indice du tableau à définir. la valeur.

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

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Vidéo du didacticiel JavaScript du site Web PHP chinois !

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!