proxy

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

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

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

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

依賴收集

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

這里使用WeakMap原因是它是一個(gè)弱引用，不會影響垃圾回收機(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ù)會詳情講解，目前可以就把他理解成一個(gè)依賴，用戶使用了effect函數(shù)過后，里面的響應(yīng)式數(shù)據(jù)發(fā)生變化后會重新執(zhí)行傳遞進(jìn)去的回調(diào)函數(shù)

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

派發(fā)更新

這里暫不考慮DOM問題，操作起來其實(shí)很簡單就是通過被Proxy劫持的target與key找到對應(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é)

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

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

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

最新評論