vue3?reactive響應式依賴收集派發更新原理是什么

這篇文章主要介紹“vue3 reactive響應式依賴收集派發更新原理是什么”，在日常操作中，相信很多人在vue3 reactive響應式依賴收集派發更新原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue3 reactive響應式依賴收集派發更新原理是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

proxy

vue3已經從Object.property更換成Proxy，Proxy相比于前者可以直接監聽對象數組，對于深層次的對象和數組，會把觸發對應getter，然后去遞歸進行依賴收集，并不是直接像vue2暴力那樣遞歸，總體而言性能更好

• 對reactive傳進來的對象進行Proxy進行劫持在內部進行依賴收集與通知更新操作

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

采用Reflet對對象進行標準化操作，因為如果直接采用JS如果失敗了，不會產生異常提示

這樣在進行獲取數據是后進行依賴收集，在更新數據后進行通知依賴更新

依賴收集

接下來便介紹依賴收集是個什么樣子

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

首先是一個WeakMap-->然后用戶通過target獲取對應的內部Map-->然后通過key獲取到Set集合，內部便是存儲的一個個依賴。其實依賴收集的過程就是這樣。

這里使用WeakMap原因是它是一個弱引用，不會影響垃圾回收機制回收。

currentEffect

那么currentEffect 到底是個什么東西呢？實際上是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();
}

后續會詳情講解，目前可以就把他理解成一個依賴，用戶使用了effect函數過后，里面的響應式數據發生變化后會重新執行傳遞進去的回調函數

vue2中收集的依賴對應watcher，vue3收集的依賴實際是effect，他們兩者實現功能實際上是一樣的。

派發更新

這里暫不考慮DOM問題，操作起來其實很簡單就是通過被Proxy劫持的target與key找到對應的Set集合調用用戶傳遞的fn函數進行依賴更新

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

到此，關于“vue3 reactive響應式依賴收集派發更新原理是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！