Analyse du principe de réactivité de vue3 et écriture de l'API

Avant-propos

Principe réactif de vue3 plus écriture d'API, comprenez rapidement le principe réactif de vue3

Blog GitHub : https://github.com/jiejiangzi/blog/issues/8

Principe réactif de vue3 Pour réaliser

, écrivez d'abord un morceau de code pour voir

implémenter l'effet

var name = 'sl', age = 22;
effect1 = () => `我叫${name}，今年${age}岁`
effect2 = () => `我叫${name}，今年${age+1}岁`
console.log(effect1()) //我叫sl，今年22岁
console.log(effect2()) //我叫sl，今年23岁
age = 30;
console.log(effect1())  //我叫sl，今年30岁
console.log(effect2())  //我叫sl，今年31岁

et voir s'il y a des points qui peuvent être optimisés ?

Tout d'abord : plusieurs fonctions, après le changement d'âge, vous devez à nouveau appeler manuellement plusieurs fonctions pour obtenir les dernières informations

J'espère que plusieurs fonctions pourront être automatiquement appelées après avoir modifié les informations

Comment l'implémenter

Je peux penser à beaucoup de stocker les fonctions ensemble et les stocker dans la fonction de collecte, et lorsque l'âge change, vous pouvez appeler le déclencheur sur plusieurs fonctions

implémenter rassembler et déclencher

var name = "sl",
  age = 22;
var tom, joy;
effect1 = () => (tom = `我叫${name}，今年${age}岁`);
effect2 = () => (joy = `我叫${name}，今年${age + 1}岁`);
var dep = new Set();
function gather() {
  dep.add(effect1);
  dep.add(effect2);
}
function trigger() {
  dep.forEach((effect) => effect());
}
gather();
effect1()
effect2()
console.log(tom); //我叫sl，今年22岁
console.log(joy); //我叫sl，今年23岁
age = 30;
trigger()
console.log(tom); //我叫sl，今年30岁
console.log(joy); //我叫sl，今年31岁

Continuons à voir s'il y a des points qui peut être optimisé

Si la variable est un Comment gérer des objets ou plusieurs objets

• Définir le stockage lorsque la variable est un type primitif

• Lorsque la variable est un objet, vous pouvez utiliser la carte pour stocker

• Lorsqu'il y a plusieurs objets, utilisez faibleMap pour stocker

var obj1 = { name: "tom", age: 22 };
var obj2 = { name: "joy", age: 23 };
var tom, joy;
effect1 = () => (tom = `我叫${obj1.name}，今年${obj1.age}岁`);
effect2 = () => (joy = `我叫${obj2.name}，今年${obj2.age}岁`);
var depsMap = new WeakMap();
function gather(target, key) {
  let depMap = depsMap.get(target);
  if (!depMap) {
    depsMap.set(target, (depMap = new Map()));
  }
  let dep = depMap.get(key);
  if (!dep) {
    depMap.set(key, (dep = new Set()));
  }
  if (target === obj1) {
    dep.add(effect1);
  } else {
    dep.add(effect2);
  }
}
function trigger(target, key) {
  let depMap = depsMap.get(target);
  if (depMap) {
    const dep = depMap.get(key);
    if (dep) {
      dep.forEach((effect) => effect());
    }
  }
}
gather(obj1, "age");//收集依赖
gather(obj2, "age");//收集依赖
effect1();
effect2();
console.log(tom); //我叫sl，今年22岁
console.log(joy); //我叫sl，今年23岁
obj1.age = 30;
obj2.age = 10;
trigger(obj1, "age");
trigger(obj2, "age");
console.log(tom); //我叫sl，今年30岁
console.log(joy); //我叫sl，今年31岁

Continuez à voir quels points peuvent être optimisés

Les déclencheurs de notification de collecte et de mise à jour de fonction invoqués ci-dessus sont collectés manuellement et déclenchent des mises à jour à chaque fois. un moyen de collecter et de déclencher automatiquement? est-ce qu'il y a une fonction d'addition dep codée en dur dans la fonction de collecte

Comment le résoudre ? utilisez ref dans vue3

function reactive(target) {
  const handle = {
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      trigger(receiver,key) // 设置值时触发自动更新
    },
    get(target, key, receiver) {
      gather(receiver, key); // 访问时收集依赖
      return Reflect.get(target, key, receiver);
    },
  };
  return new Proxy(target, handle);
}

Vous devez utiliser .value pour obtenir la valeur

var obj1 = reactive({ name: "tom", age: 22 });
var obj2 = reactive({ name: "joy", age: 23 });
var tom, joy;
effect1 = () => (tom = `我叫${obj1.name}，今年${obj1.age}岁`);
effect2 = () => (joy = `我叫${obj2.name}，今年${obj2.age}岁`);
var depsMap = new WeakMap();
function gather(target, key) {
  let depMap = depsMap.get(target);
  if (!depMap) {
    depsMap.set(target, (depMap = new Map()));
  }
  let dep = depMap.get(key);
  if (!dep) {
    depMap.set(key, (dep = new Set()));
  }
  if (target === obj1) {
    dep.add(effect1);
  } else {
    dep.add(effect2);
  }
}
function trigger(target, key) {
  let depMap = depsMap.get(target);
  if (depMap) {
    const dep = depMap.get(key);
    if (dep) {
      dep.forEach((effect) => effect());
    }
  }
}
effect1();
effect2();
console.log(tom); //我叫sl，今年22岁
console.log(joy); //我叫sl，今年23岁
obj1.age = 30;
obj2.age = 10;
console.log(tom); //我叫sl，今年30岁
console.log(joy); //我叫sl，今年31岁

Code complet

let activeEffect = null
function effect(fn) {
  activeEffect = fn;
  activeEffect();
  activeEffect = null; // 执行后立马变成null
}
var depsMap = new WeakMap();
function gather(target, key) {
  // 避免例如console.log(obj1.name)而触发gather
  if (!activeEffect) return;
  let depMap = depsMap.get(target);
  if (!depMap) {
    depsMap.set(target, (depMap = new Map()));
  }
  let dep = depMap.get(key);
  if (!dep) {
    depMap.set(key, (dep = new Set()));
  }
  dep.add(activeEffect) //将函数添加到依赖
}
effect(effect1);
effect(effect2);

apprentissage recommandé : "

Les 5 dernières sélections de didacticiels vidéo vue.js

"

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!