Apakah prinsip pengumpulan, penghantaran dan kemas kini pergantungan responsif reaktif vue3?

proksi

vue3 telah ditukar daripada Object.property kepada Proxy Berbanding dengan yang terdahulu, Proxy boleh memantau secara langsung tatasusunan objek. Untuk Objek dan tatasusunan tahap dalam akan mencetuskan getter yang sepadan, dan kemudian secara rekursif mengumpulkan kebergantungan secara langsung seperti vue2 keganasan Secara keseluruhannya, prestasinya lebih baik

• Ya. Objek yang diluluskan oleh reaktif dirampas oleh Proksi dan secara dalaman melaksanakan operasi pengumpulan kebergantungan dan kemas kini pemberitahuan

function reactive(raw) {
  return new Proxy(raw, {
    get(target, key) {
      const res = Reflect.get(target, key);
      //添加依赖
      track(target, key as string);
      return res;
    },
    set(target, key, value) {
      const res = Reflect.set(target, key, value);
      trigger(target, key);
      return res;
    },
  });
}

menggunakan Reflet untuk menyeragamkan objek, kerana jika ia gagal jika JS digunakan secara langsung , Tiada gesaan pengecualian akan dijana

Dengan cara ini, pengumpulan kebergantungan akan dilakukan selepas mendapatkan data dan kemas kini kebergantungan akan dimaklumkan selepas mengemas kini data

Pengumpulan kebergantungan

Seterusnya, koleksi pergantungan akan diperkenalkan Bagaimana rupanya

const targetMap = new WeakMap();
function track(target, key) {
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }
  dep.add(currentEffect);
}

Mula-mula ia adalah Peta Lemah--> Kemudian pengguna mendapat Peta dalaman yang sepadan melalui sasaran--> diperoleh melalui kunci, dan kebergantungan dalaman disimpan satu demi satu. Sebenarnya, ini adalah proses pengumpulan tanggungan.

Sebab WeakMap digunakan di sini ialah ia adalah rujukan yang lemah dan tidak akan menjejaskan mekanisme kutipan sampah.

currentEffect

Jadi apakah sebenarnya currentEffect? Malah, ia adalah kelas berjalan ReactiveEffect

class ReactiveEffect {
  private fn: Function;
  constructor(_fn: Function) {
    this.fn = _fn;
  }
  run() {
    currentEffect = this;
    this.fn();
  }
}
let currentEffect: null | ReactiveEffect = null;
function effect(fn: Function) {
  const reactiveEffect = new ReactiveEffect(fn);
  reactiveEffect.run();
}

dalam

, yang akan diterangkan secara terperinci kemudian, ia boleh difahami sebagai kebergantungan Selepas pengguna menggunakan fungsi kesan, data responsif dalam akan ditetapkan semula apabila ia berubah. Laksanakan fungsi panggil balik yang dihantar dalam

Kebergantungan yang dikumpulkan dalam vue2 sepadan dengan pemerhati, dan kebergantungan yang dikumpul dalam vue3 sebenarnya adalah kesan yang mereka laksanakan.

Edarkan kemas kini

Saya tidak akan mempertimbangkan isu DOM buat masa ini sebenarnya sangat mudah Ia adalah untuk mencari koleksi Set yang sepadan dan menghubungi pengguna melalui Proxy dan target dirampas oleh key Fungsi fn yang diluluskan melaksanakan kemas kini pergantungan

function trigger(target, key) {
  let depsMap = targetMap.get(target);
  let dep = depsMap.get(key);
  for (let effect of dep) {
    effect.fn();
  }
}

Atas ialah kandungan terperinci Apakah prinsip pengumpulan, penghantaran dan kemas kini pergantungan responsif reaktif vue3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!