Maison > interface Web > js tutoriel > le corps du texte

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

不言
Libérer: 2019-03-20 10:08:33
avant
1983 Les gens l'ont consulté

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;
      }
  });
}
Copier après la connexion

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;
    }
  });
Copier après la connexion

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!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!