vue3?reactive響應(yīng)式依賴(lài)收集派發(fā)更新原理是什么

這篇文章主要介紹“vue3 reactive響應(yīng)式依賴(lài)收集派發(fā)更新原理是什么”，在日常操作中，相信很多人在vue3 reactive響應(yīng)式依賴(lài)收集派發(fā)更新原理是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue3 reactive響應(yīng)式依賴(lài)收集派發(fā)更新原理是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

proxy

vue3已經(jīng)從Object.property更換成Proxy，Proxy相比于前者可以直接監(jiān)聽(tīng)對(duì)象數(shù)組，對(duì)于深層次的對(duì)象和數(shù)組，會(huì)把觸發(fā)對(duì)應(yīng)getter，然后去遞歸進(jìn)行依賴(lài)收集，并不是直接像vue2暴力那樣遞歸，總體而言性能更好

• 對(duì)reactive傳進(jìn)來(lái)的對(duì)象進(jìn)行Proxy進(jìn)行劫持在內(nèi)部進(jìn)行依賴(lài)收集與通知更新操作

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

采用Reflet對(duì)對(duì)象進(jìn)行標(biāo)準(zhǔn)化操作，因?yàn)槿绻苯硬捎肑S如果失敗了，不會(huì)產(chǎn)生異常提示

這樣在進(jìn)行獲取數(shù)據(jù)是后進(jìn)行依賴(lài)收集，在更新數(shù)據(jù)后進(jìn)行通知依賴(lài)更新

依賴(lài)收集

接下來(lái)便介紹依賴(lài)收集是個(gè)什么樣子

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

首先是一個(gè)WeakMap-->然后用戶(hù)通過(guò)target獲取對(duì)應(yīng)的內(nèi)部Map-->然后通過(guò)key獲取到Set集合，內(nèi)部便是存儲(chǔ)的一個(gè)個(gè)依賴(lài)。其實(shí)依賴(lài)收集的過(guò)程就是這樣。

這里使用WeakMap原因是它是一個(gè)弱引用，不會(huì)影響垃圾回收機(jī)制回收。

currentEffect

那么currentEffect 到底是個(gè)什么東西呢？實(shí)際上是ReactiveEffect中正在運(yùn)行的類(lèi)

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

后續(xù)會(huì)詳情講解，目前可以就把他理解成一個(gè)依賴(lài)，用戶(hù)使用了effect函數(shù)過(guò)后，里面的響應(yīng)式數(shù)據(jù)發(fā)生變化后會(huì)重新執(zhí)行傳遞進(jìn)去的回調(diào)函數(shù)

vue2中收集的依賴(lài)對(duì)應(yīng)watcher，vue3收集的依賴(lài)實(shí)際是effect，他們兩者實(shí)現(xiàn)功能實(shí)際上是一樣的。

派發(fā)更新

這里暫不考慮DOM問(wèn)題，操作起來(lái)其實(shí)很簡(jiǎn)單就是通過(guò)被Proxy劫持的target與key找到對(duì)應(yīng)的Set集合調(diào)用用戶(hù)傳遞的fn函數(shù)進(jìn)行依賴(lài)更新

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

到此，關(guān)于“vue3 reactive響應(yīng)式依賴(lài)收集派發(fā)更新原理是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！