vue-next響應(yīng)式原理的示例分析

這篇文章給大家分享的是有關(guān)vue-next響應(yīng)式原理的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

預(yù)備知識(shí)

無(wú)論是閱讀這篇文章，還是閱讀 vue-next 響應(yīng)式模塊的源碼，首先有兩個(gè)知識(shí)點(diǎn)是必備的：

• Proxy：es6 中新的代理內(nèi)建工具類(lèi)

• Reflect：es6 中新的反射工具類(lèi)

由于篇幅有限，這里也不詳細(xì)贅述這兩個(gè)類(lèi)的用途與使用方法了，推薦三篇我認(rèn)為不錯(cuò)的文章，僅供參考：

• ES6 Proxies in Depth

• ES6 Proxy Traps in Depth 

• ES6 Reflection in Depth
  

接口

對(duì)于 vue-next 響應(yīng)式系統(tǒng)的 RFC，可以參考這里。雖然距離現(xiàn)在有一段時(shí)間了，但是通過(guò)閱讀源碼，可以發(fā)現(xiàn)一些影子。

我們大體要實(shí)現(xiàn)的效果如下面的代碼所示：

// 實(shí)現(xiàn)兩個(gè)方法 reactive 和 effect

const state = reactive({
  count: 0
})

effect(() => {
  console.log('count: ', state.count)
})

state.count++ // 輸入 count: 1

可以發(fā)現(xiàn)我們熟悉的依賴(lài)收集階段（同時(shí)也是觀察者模式的訂閱過(guò)程），是在 effect 中進(jìn)行的，依賴(lài)收集的準(zhǔn)備工作（即數(shù)據(jù)劫持邏輯），是在 reactive 中進(jìn)行的，而數(shù)據(jù)變化的觸發(fā)響應(yīng)的邏輯在后面的 state.count++ 代碼執(zhí)行時(shí)進(jìn)行（同時(shí)也是觀察者模式的發(fā)布過(guò)程），之后便會(huì)執(zhí)行之前傳入 effect 內(nèi)部的回調(diào)函數(shù)并輸入 count: 1。

類(lèi)型與公共變量

由于 vue-next 用 ts 進(jìn)行了重寫(xiě)，這里我也使用 ts 來(lái)實(shí)現(xiàn)這個(gè)極簡(jiǎn)版本的響應(yīng)式系統(tǒng)。主要涉及到的類(lèi)型和公共變量如下：

type Effect = Function;
type EffectMap = Map<string, Effect[]>;

let currentEffect: Effect;
const effectMap: EffectMap = new Map();

• currentEffect：用來(lái)儲(chǔ)存當(dāng)前正在收集依賴(lài)的 effect

• effectMap：代表目標(biāo)對(duì)象每個(gè) key 所對(duì)應(yīng)的依賴(lài)于它的 effect 數(shù)組，也可以把它理解為觀察者模式中的訂閱者字典

利用 Proxy 實(shí)現(xiàn)數(shù)據(jù)劫持

在之前的版本中，vue 利用 Object.defineProperty 中的 setter 和 getter 來(lái)對(duì)數(shù)據(jù)對(duì)象進(jìn)行劫持，vue-next 則通過(guò) Proxy。眾所周知，Object.defineProperty 所實(shí)現(xiàn)的數(shù)據(jù)劫持是有一定限制的，而 Proxy 就會(huì)強(qiáng)大很多。

首先，我們?cè)谀X后中，設(shè)想一下如何使用 Proxy 來(lái)實(shí)現(xiàn)數(shù)據(jù)劫持呢？很簡(jiǎn)單，大體結(jié)構(gòu)如下所示：

export function reactive(obj) {
 const proxied = new Proxy(obj, handlers);

 return proxied;
}

這里的 handlers 是聲明如何處理各個(gè) trap 的邏輯，比如：

const handlers = {
  get: function(target, key, receiver) {
    ...
  },
  set: function(target, key, value, receiver) {
    ...
  },
  deleteProperty(target, key) {
    ...
  }
  // ...以及其他 trap
 }

由于這里是極簡(jiǎn)版本的實(shí)現(xiàn)，那么我們就僅僅實(shí)現(xiàn) get 和 set 兩個(gè) trap 就可以了，分別對(duì)應(yīng)依賴(lài)收集和觸發(fā)響應(yīng)的邏輯。

依賴(lài)收集

對(duì)于依賴(lài)收集的實(shí)現(xiàn)，由于是極簡(jiǎn)版本，實(shí)現(xiàn)的前提如下：

• 不考慮對(duì)象的嵌套

• 不考慮集合類(lèi)型

• 不考慮基礎(chǔ)類(lèi)型

• 不考慮對(duì)代理對(duì)象的處理

哈哈，基本這四點(diǎn)排除之后，這個(gè)依賴(lài)收集函數(shù)就會(huì)很輕很薄，如下：

function(target, key: string, receiver) {
    // 僅僅在某個(gè) effect 內(nèi)部進(jìn)行依賴(lài)收集
    if (currentEffect) {
     if (effectMap.has(key)) {
      const effects = effectMap.get(key);
      if (effects.indexOf(currentEffect) === -1) {
       effects.push(currentEffect);
      }
     } else {
      effectMap.set(key, [currentEffect]);
     }
    }

   return Reflect.get(target, key, receiver);
}

實(shí)現(xiàn)的邏輯很簡(jiǎn)單，其實(shí)就是觀察者模式中注冊(cè)訂閱者的實(shí)現(xiàn)邏輯，值得注意的是，這里對(duì)于 target 的賦值邏輯，我們委托給 Reflect 來(lái)完成，雖然 target[key] 也是可以工作的，但是使用 Reflect 是更提倡的方式。

觸發(fā)響應(yīng)

觸發(fā)響應(yīng)的邏輯就比較簡(jiǎn)單了，其實(shí)是對(duì)應(yīng)觀察者模式中，發(fā)布事件的邏輯，如下：

function(target, key: string, value, receiver) {
    const result = Reflect.set(target, key, value, receiver);
    
    if (effectMap.has(key)) {
     effectMap.get(key).forEach(effect => effect());
    }

    return result;
}

同樣，這里使用 Reflect 來(lái)對(duì) target 進(jìn)行賦值操作，因?yàn)樗鼤?huì)返回一個(gè) boolean 值代表是否成功，而 set 這個(gè) trap 也需要代表相同含義的值。

通過(guò) reactive 方法來(lái)初始化代理對(duì)象

實(shí)現(xiàn)了數(shù)據(jù)劫持的代理邏輯之后，我們只需要在 reactive 這個(gè)方法中，返回一個(gè)代理對(duì)象的實(shí)例即可，還記的上文中我們?cè)趯?shí)現(xiàn)之前腦海中浮現(xiàn)的大致代碼框架嗎？

如下：

export function reactive(obj: any) {
 const proxied = new Proxy(obj, {
  get: function(target, key: string, receiver) {
   if (currentEffect) {
    if (effectMap.has(key)) {
     const effects = effectMap.get(key);
     if (effects.indexOf(currentEffect) === -1) {
      effects.push(currentEffect);
     }
    } else {
     effectMap.set(key, [currentEffect]);
    }
   }

   return Reflect.get(target, key, receiver);
  },
  set: function(target, key: string, value, receiver) {
   const result = Reflect.set(target, key, value, receiver);

   if (effectMap.has(key)) {
    effectMap.get(key).forEach(effect => effect());
   }

   return result;
  }
 });

 return proxied;
}

依賴(lài)收集的準(zhǔn)備工作

上文中提到了，對(duì)于依賴(lài)收集的工作，我們是有條件地進(jìn)行的，即在一個(gè) effect 中，我們才會(huì)進(jìn)行收集，其他情況下的取值邏輯，我們則不會(huì)進(jìn)行依賴(lài)收集，因此，effect 方法正式為了實(shí)現(xiàn)這點(diǎn)而存在的，如下：

export function effect(fn: Function) {
 const effected = function() {
  fn();
 };

 currentEffect = effected;
 effected();
 currentEffect = undefined;

 return effected;
}

之所以實(shí)現(xiàn)如此簡(jiǎn)單，是因?yàn)槲覀冞@里是極簡(jiǎn)版本，不需要考慮諸如 readOnly 、異常以及收集時(shí)機(jī)等因素?？梢园l(fā)現(xiàn)，就是將傳入的回調(diào)函數(shù)包裹在另一個(gè)方法中，然后將這個(gè)方法用 currentEffect 這個(gè)變量暫存，之后嘗試運(yùn)行一下即可。當(dāng) effect 運(yùn)行完畢之后，再將 currentEffect 置空，這樣就可以達(dá)到只在 effect 下進(jìn)行依賴(lài)收集的目的。

感謝各位的閱讀！關(guān)于“vue-next響應(yīng)式原理的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！