快捷導(dǎo)航

vue3?reactive響應(yīng)式依賴收集派發(fā)更新原理解析

更新時(shí)間：2023年03月06日 10:32:23 作者：chengjunjian

這篇文章主要為大家介紹了vue3響應(yīng)式reactive依賴收集派發(fā)更新原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

proxy

vue3的響應(yīng)式實(shí)現(xiàn)依舊是依賴收集與派發(fā)更新，本節(jié)乃至后面涉及的代碼都是經(jīng)過(guò)簡(jiǎn)化，文章目的是講解原理，直接貼源碼會(huì)很枯燥

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

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

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

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

依賴收集

接下來(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-->然后用戶通過(guò)target獲取對(duì)應(yīng)的內(nèi)部Map-->然后通過(guò)key獲取到Set集合，內(nèi)部便是存儲(chǔ)的一個(gè)個(gè)依賴。其實(shí)依賴收集的過(guò)程就是這樣。

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

currentEffect

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

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è)依賴，用戶使用了effect函數(shù)過(guò)后，里面的響應(yīng)式數(shù)據(jù)發(fā)生變化后會(huì)重新執(zhí)行傳遞進(jìn)去的回調(diào)函數(shù)

vue2中收集的依賴對(duì)應(yīng)watcher，vue3收集的依賴實(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)用用戶傳遞的fn函數(shù)進(jìn)行依賴更新

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

總結(jié)

依賴收集與更新流程非常簡(jiǎn)單，其實(shí)就是當(dāng)用戶訪問(wèn)數(shù)據(jù)Proxy監(jiān)聽(tīng)到后進(jìn)行依賴收集；怎么收集呢用戶在使用effect函數(shù)時(shí)實(shí)際上currentEffect就有值，待到訪問(wèn)數(shù)據(jù)后就可以收集這個(gè)依賴；然而用戶如果設(shè)置對(duì)應(yīng)數(shù)據(jù)那么就會(huì)被Proxy監(jiān)聽(tīng)到，然后通過(guò)key拿到對(duì)應(yīng)依賴執(zhí)行fn函數(shù)

下一節(jié)會(huì)詳細(xì)介紹effect，這一節(jié)只是初步介紹effect是的作用，以及如何解決分支切換、嵌套棧、無(wú)限循環(huán)遞歸問(wèn)題。

以上就是vue3 reactive響應(yīng)式依賴收集派發(fā)更新原理解析的詳細(xì)內(nèi)容，更多關(guān)于vue3 reactive響應(yīng)式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: