前言

1.本文將從零開始手寫一份vue-next中的響應式原理,出於篇幅和理解的難易程度,我們將只實現核心的api並忽略一些邊界的功能點

本文將實現的api包括

• track
• trigger
• effect
• reactive
• watch
• computed
  
  2.最近很多人私信我問前端問題，博客登陸的少沒及時回覆，為此我建了個前端扣扣裙 519293536  大家以後有問題直接群里找我。都會儘力幫大家，博客私信我很少看

項目搭建

我們採用最近較火的vite創建項目

本文演示的版本

• node v12.16.1
• npm v6.14.5
• yarn v1.22.4

我們首先下載模板

yarn create vite-app vue-next-reactivity
複製代碼

模板下載好後進入目錄

cd vue-next-reactivity
複製代碼

然後安裝依賴

yarn install
複製代碼

然後我們僅保留src目錄下的main.js文件,清空其餘文件並創建我們要用到的reactivity文件夾

整個文件目錄如圖所示,輸入npm run dev項目便啟動了

手寫代碼

響應式原理的本質

在開始手寫前,我們思考一下什麼是響應式原理呢?

我們從vue-next的使用中來解釋一下

vue-next中用到的響應式大概分為三個

• template或render

在頁面中使用到的變數改變後,頁面自動進行了刷新

• computed

當計算屬性函數中用到的變數發生改變後,計算屬性自動進行了改變

• watch

當監聽的值發生改變後,自動觸發了對應的回調函數

以上三點我們就可以總結出響應式原理的本質

當一個值改變後會自動觸發對應的回調函數

這裡的回調函數就是template中的頁面刷新函數,computed中的重新計算屬性值的函數以及本來就是一個回調函數的watch回調

所以我們要去實現響應式原理現在就拆分為了兩個問題

• 監聽值的改變
• 觸發對應的回調函數

我們解決了這兩個問題,便寫出了響應式原理

監聽值的改變

javascript中提供了兩個api可以做到監聽值的改變

一個是vue2.x中用到的Object.defineProperety

const obj = {};
let aValue = 1;
Object.defineProperty(obj, 'a', {
  enumerable: true,
  configurable: true,
  get() {
    console.log('我被讀取了');
    return aValue;
  },
  set(value) {
    console.log('我被設置了');
    aValue = value;
  },
});

obj.a; // 我被讀取了
obj.a = 2; // 我被設置了
複製代碼

還有一個方法就是vue-next中用到的proxy,這也是本次手寫中會用到的方法

這個方法解決了Object.defineProperety的四個痛點

1. 無法攔截在對象上屬性的新增和刪除
2. 無法攔截在數組上調用push pop shift unshift等對當前數組會產生影響的方法
3. 攔截數組索引過大的性能開銷
4. 無法攔截Set Map等集合類型

當然主要還是前兩個

關於第三點,vue2.x中數組索引的改變也得通過this.$set去設置,導致很多同學誤認為Object.defineProperety也沒法攔截數組索引,其實它是可以的,vue2.x沒做的原因估計就是因為性價比不高

以上4點proxy就可以完美解決,現在讓我們動手開始寫一個proxy攔截吧!

proxy攔截

我們在之前創建好的reactivity目錄創建兩個文件

utils.js存放一些公用的方法

reactive.js 存放proxy攔截的方法

我們先在utils.js中先添加將要用到的判斷是否為原生對象的方法

reactivity/utils.js

// 獲取原始類型
export function toPlain(value) {
  return Object.prototype.toString.call(value).slice(8, -1);
}

// 是否是原生對象
export function isPlainObject(value) {
  return toPlain(value) === 'Object';
}
複製代碼

reactivity/reactive.js

import { isPlainObject } from './utils';

// 本列只有數組和對象才能被觀測
function canObserve(value) {
  return Array.isArray(value) || isPlainObject(value);
}

// 攔截數據
export function reactive(value) {
  // 不能監聽的數值直接返回
  if (!canObserve(value)) {
    return;
  }
  const observe = new Proxy(value, {
    // 攔截讀取
    get(target, key, receiver) {
      console.log(`${key}被讀取了`);
      return Reflect.get(target, key, receiver);
    },
    // 攔截設置
    set(target, key, newValue, receiver) {
      const res = Reflect.set(target, key, newValue, receiver);
      console.log(`${key}被設置了`);
      return res;
    },
  });
  // 返回被觀察的proxy實例
  return observe;
}
複製代碼

reactivity/index.js

導出方法

export * from './reactive';
複製代碼

main.js

import { reactive } from './reactivity';

const test = reactive({
  a: 1,
});

const testArr = reactive([1, 2, 3]);

// 1
test.a; // a被讀取了
test.a = 2; // a被設置了

// 2
test.b; // b被讀取了

// 3
testArr[0]; // 0被讀取了

// 4
testArr.pop(); // pop被讀取了 length被讀取了 2被讀取了 length被設置了
複製代碼

可以看到我們添加了一個reactive方法用於將對象和數組進行proxy攔截,並返回了對應的proxy實例

列子中的1 2 3都很好理解,我們來解釋下第4個

我們調用pop方法首先會觸發get攔截,列印pop被讀取了

然後調用pop方法後會讀取數組的長度觸發get攔截,列印length被讀取了

pop方法的返回值是當前刪除的值,會讀取數組索引為2的值觸發get攔截,列印2被讀取了

pop後數組長度會被改變,會觸發set攔截,列印length被設置了

大家也可以試試其他改變數組的方法

可以歸納為一句話

對數組的本身有長度影響的時候length會被讀取和重新設置,對應改變的值的索引也會被讀取或重新設置(push unshift)

添加回調函數

我們通過了proxy實現了對值的攔截解決了我們提出的第一個問題

但我們並沒有在值的改變後觸發回調函數,現在讓我們來補充回調函數

reactivity/reactive.js

import { isPlainObject } from './utils';

// 本列只有數組和對象才能被觀測
function canObserve(value) {
  return Array.isArray(value) || isPlainObject(value);
}

+ // 假設的回調函數
+ function notice(key) {
+   console.log(`${key}被改變了並觸發了回調函數`);
+ }

// 攔截數據
export function reactive(value) {
  // 不能監聽的數值直接返回
  if (!canObserve(value)) {
    return;
  }
  const observe = new Proxy(value, {
    // 攔截讀取
    get(target, key, receiver) {
-     console.log(`${key}被讀取了`);
      return Reflect.get(target, key, receiver);
    },
    // 攔截設置
    set(target, key, newValue, receiver) {
      const res = Reflect.set(target, key, newValue, receiver);
-     console.log(`${key}被設置了`);
+     // 觸發假設的回調函數
+     notice(key);
      return res;
    },
  });
  // 返回被觀察的proxy實例
  return observe;
}

複製代碼

我麽以最直觀的方法在值被改變的set攔截中觸發了我們假設的回調

main.js

import { reactive } from './reactivity';

const test = reactive({
  a: 1,
  b: 2,
});

test.a = 2; // a被改變了並觸發了回調函數
test.b = 3; // b被改變了並觸發了回調函數
複製代碼

可以看到當值改變的時候,輸出了對應的日誌

但這個列子肯定是有問題的,問題還不止一處,讓我們一步一步來升級它

回調函數的收集

上面的列子中a和b都對應了一個回調函數notice,可實際的場景中,a和b可能對應分別不同的回調函數,如果我們單單用一個簡單的全局變數存儲回調函數,很明顯這是不合適的,如果有後者則會覆蓋前者,那麼怎麼才能讓回調函數和各個值之間對應呢?

很容易想到的就是js中的key-value的對象,屬性a和b分別作為對象的key值則可以區分各自的value值

但用對象收集回調函數是有問題的

上列中我們有一個test對象,它的屬性有a和b,當我們存在另外一個對象test1它要是也有a和b屬性,那不是重覆了嗎,這又會觸發我們之前說到的重覆的問題

有同學可能會說,那再包一層用test和test1作為屬性名不就好了,這種方法也是不可行的,在同一個執行上下文中不會出現兩個相同的變數名,但不同執行上下文可以,這又導致了上面說到的重覆的問題

處理這個問題要用到js對象按引用傳遞的特點

// 1.js
const obj = {
  a: 1,
};

// 2.js
const obj = {
  a: 1,
};
複製代碼

我們在兩個文件夾定義了名字屬性數據結構完全一樣的對象obj,但我們知道這兩個obj並不是相等的,因為它們的記憶體指向不同地址

所以如果我們能直接把對象作為key值,那麼是不是就可以區分看似"相同"的對象了呢?

答案肯定是可以的,不過我們得換種數據結構,因為js中對象的key值是不能為一個對象的

這裡我們就要用到es6新增的一種數據結構Map和WeakMap

我們通過舉例來說明這種數據結構的存儲模式

假設現在我們有兩個數據結構“相同”的對象obj,它們都有各自的屬性a和b,各個屬性的改變會觸發不同的回調函數

// 1.js
const obj = {
  a: 1,
  b: 2
};

// 2.js
const obj = {
  a: 1,
  b: 2
};
複製代碼

用Map和WeakMap來存儲就如下圖所示

我們將存儲回調函數的全局變數targetMap定義為一個WeakMap,它的key值是各個對象,在本列中就是兩個obj,targetMap的value值是一個Map,本列中兩個obj分別擁有兩個屬性a和b,Map的key就是屬性a和b,Map的value就是屬性a和b分別對應的Set回調函數集合

可能大家會有疑問為什麼targetMap用WeakMap而各個對象的屬性存儲用的Map,這是因為WeakMap只能以對象作為key,Map是對象或字元串都可以,像上面的列子屬性a和b只能用Map存

我們再以實際api來加深對這種存儲結構的理解

• computed

const c = computed(() => test.a)
複製代碼

這裡我們需要將() => test.a回調函數放在test.a的集合中,如圖所示

• watch

watch(() => test.a, val => { console.log(val) })
複製代碼

這裡我們需要將val => { console.log(val) }回調函數放在test.a的集合中,如圖所示

• template

createApp({
  setup() {
    return () => h('div', test.a);
  },
});
複製代碼

這裡我們需要將dom刷新的函數放在test.a中,如圖所示

上面我們已經知道了存儲回調函數的方式,現在我們來思考如何將回調函數放到我們定義好的存儲結構中

還是拿上面的列子舉列

watch(() => test.a, val => { console.log(val) })
複製代碼

這個列子中,我們需要將回調函數val => { console.log(val) })放到test.a的Set集合中,所以我們需要拿到對象test和當前對象的屬性a,如果僅通過() => test.a,我們只能拿到test.a的值,無法得知具體的對象和屬性

但其實這裡讀取了test.a的值,就變相的拿到了具體的對象和屬性

大家還記得我們在前面用proxy攔截了test.a的讀取嗎,get攔截的第一個參數就是當前讀取的對象,第二個參數就是當前讀取的屬性

所以回調函數的收集是在proxy的get攔截中處理

現在讓我們用代碼實現剛剛理好的思路

首先我們創建effect.js文件,這個文件用於存放回調函數的收集方法和回調函數的觸發方法

reactivity/effect.js

// 回調函數集合
const targetMap = new WeakMap();

// 收集回調函數
export function track(target, key) {
}
// 觸發回調函數
export function trigger(target, key) {
}
複製代碼

然後改寫proxy中的攔截內容

reactivity/reactive.js

import { isPlainObject } from './utils';
+ import { track, trigger } from './effect';

// 本列只有數組和對象才能被觀測
function canObserve(value) {
  return Array.isArray(value) || isPlainObject(value);
}

- // 假設的回調函數
- function notice(key) {
-   console.log(`${key}被改變了並觸發了回調函數`);
- }

// 攔截數據
export function reactive(value) {
  // 不能監聽的數值直接返回
  if (!canObserve(value)) {
    return;
  }
  const observe = new Proxy(value, {
    // 攔截讀取
    get(target, key, receiver) {
+     // 收集回調函數
+     track(target, key);
      return Reflect.get(target, key, receiver);
    },
    // 攔截設置
    set(target, key, newValue, receiver) {
      const res = Reflect.set(target, key, newValue, receiver);
+     // 觸發回調函數
+     trigger(target, key);
-     // 觸發假設的回調函數
-     notice(key);
      return res;
    },
  });
  // 返回被觀察的proxy實例
  return observe;
}
複製代碼

這裡還沒補充effect中的內容是讓大家可以清晰的看見收集和觸發的位置

現在我們來補充track收集回調函數和trigger觸發回調函數

reactivity/effect.js

// 回調函數集合
const targetMap = new WeakMap();

// 收集回調函數
export function track(target, key) {
  // 通過對象獲取每個對象的map
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    // 當對象被第一次收集時 我們需要添加一個map集合
    targetMap.set(target, (depsMap = new Map()));
  }
  // 獲取對象下各個屬性的回調函數集合
  let dep = depsMap.get(key);
  if (!dep) {
    // 當對象屬性第一次收集時 我們需要添加一個set集合
    depsMap.set(key, (dep = new Set()));
  }
  // 這裡添加回調函數
  dep.add(() => console.log('我是一個回調函數'));
}

// 觸發回調函數
export function trigger(target, key) {
  // 獲取對象的map
  const depsMap = targetMap.get(target);
  if (depsMap) {
    // 獲取對應各個屬性的回調函數集合
    const deps = depsMap.get(key);
    if (deps) {
      // 觸發回調函數
      deps.forEach((v) => v());
    }
  }
}
複製代碼

然後運行我們的demo

main.js

import { reactive } from './reactivity';

const test = reactive({
  a: 1,
  b: 2,
});

test.b; // 讀取收集回調函數

setTimeout(() => {
  test.a = 2; // 沒有任何觸發 因為沒收集回調函數
  test.b = 3; // 我是一個回調函數
}, 1000);
複製代碼

我們來看看此時的targetMap結構

targetMap中存在key值{ a: 1,b: 2 },它的value值也是一個Map,這個Map中存在key值b,這個Map的value便是回調函數的集合Set,現在就只有一個我們寫死的() => console.log('我是一個回調函數')

用圖形結構就是這樣

大家可能覺得要收集回調函數要讀取一次test.b是反人類的操作,這是因為我們還沒有講到對應的api,平常讀取的操作不需要這麼手動式的調用,api會自己處理

watch

上面的列子存在一個很大的問題,就是我們沒有自定義回調函數,回調函數在代碼中直接被寫死了

現在我們將通過watch去實現自定義的回調函數

watch在vue-next中的api還蠻多的,我們將實現其中一部分類型,這足以讓我們理解響應式原理

我們將實現的demo如下

export function watch(fn, cb, options) {}

const test = reactive({
  a: 1,
});

watch(
  () => test.a,
  (val) => { console.log(val); }
);
複製代碼

watch接受三個參數

第一個參數是一個函數,表達被監聽的值

第二個參數是一個函數,表達監聽值改變後要觸發的回調,第一個參數是改變後的值,第二個參數是改變前的值

第三個參數是一個對象,只有一個deep屬性,deep表深度觀察

現在我們需要做的就是把回調函數(val) => { console.log(val); }放到test.a的Set集合中

所以在() => test.a執行讀取test.a前,我們需要將回調函數用一個變數存儲

當讀取test.a觸發track函數的時候,可以在track函數中獲取到這個變數,並將它存儲到對應屬性的集合Set中

reactivity/effect.js

// 回調函數集合
const targetMap = new WeakMap();

+ // 當前激活的回調函數
+ export let activeEffect;

+ // 設置當前回調函數
+ export function setActiveEffect(effect) {
+   activeEffect = effect;
+ }

// 收集回調函數
export function track(target, key) {
  // 沒有激活的回調函數 直接退出不收集
  if (!activeEffect) {
    return;
  }
  // 通過對象獲取每個對象的map
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    // 當對象被第一次收集時 我們需要添加一個map集合
    targetMap.set(target, (depsMap = new Map()));
  }
  // 獲取對象下各個屬性的回調函數集合
  let dep = depsMap.get(key);
  if (!dep) {
    // 當對象屬性第一次收集時 我們需要添加一個set集合
    depsMap.set(key, (dep = new Set()));
  }
  // 這裡添加回調函數
- dep.add(() => console.log('我是一個回調函數'));
+ dep.add(activeEffect);
}

// 觸發回調函數
export function trigger(target, key) {
  // 省略
}
複製代碼

因為watch方法和track、trigger方法不在同一個文件,所以我們用export導出變數activeEffect,並提供了一個方法setActiveEffect修改它

這也是一個不同模塊下使用公共變數的方法

現在讓我們創建watch.js,並添加watch方法

reactivity/watch.js

import { setActiveEffect } from './effect';

export function watch(fn, cb, options = {}) {
  let oldValue;
  // 在執行fn獲取oldValue前先存儲回調函數
  setActiveEffect(() => {
    // 確保回調函數觸發 獲取到的是新值
    let newValue = fn();
    // 觸發回調函數
    cb(newValue, oldValue);
    // 新值賦值給舊值
    oldValue = newValue;
  });
  // 讀取值並收集回調函數
  oldValue = fn();
  // 置空回調函數
  setActiveEffect('');
}
複製代碼

很簡單的幾行代碼,在執行fn讀取值前把回調函數通過setActiveEffect設置以便在讀取的時候track函數中可以拿到當前的回調函數activeEffect,讀取完後再制空回調函數,就完成了

同樣我們需要導出watch方法

reactivity/index.js

export * from './reactive';
+ export * from './watch';
複製代碼

main.js

import { reactive, watch } from './reactivity';

const test1 = reactive({
  a: 1,
});

watch(
  () => test1.a,
  (val) => {
    console.log(val) // 2;
  }
);

test1.a = 2;
複製代碼

可以看到列子正常執行列印出了2,我們來看看targetMap的結構

targetMap存在一個key值{a:1},它的value值也是一個Map,這個Map中存在key值a,這個Map的value便是回調函數(val) => { console.log(val); }

targetMap的圖形結構如下

computed

watch的其他api補充我們將放到後面,在感受到響應式原理的思維後,我們趁熱打鐵再來實現computed的功能

同樣的computed這個api在vue-next中也有多種寫法,我們將只實現函數返回值的寫法

export function computed(fn) {}

const test = reactive({
  a: 1,
});

const w = computed(() => test.a + 1);
複製代碼

但如果我們僅實現computed傳入函數的寫法,其實在vue-next中和響應式原理沒多大關係

因為vue-next中提供的api讀取值不是直接讀取的w而是w.value

我們創建computed.js,補充computed函數

reactivity/computed.js

export function computed(fn) {
  return {
    get value() {
      return fn();
    },
  };
}
複製代碼

可以看到就幾行代碼,每次讀取value重新運行一次fn求值就行了

reactivity/index.js

我們再導出它

export * from './reactive';
export * from './watch';
+ export * from './computed';
複製代碼

main.js

import { reactive, computed } from './reactivity';

const test = reactive({
  a: 1,
});

const w = computed(() => test.a + 1);

console.log(w.value); // 2
test.a = 2;
console.log(w.value); // 3
複製代碼

可以看到列子完美運行

這裡帶來了兩個問題

• 為什麼api的寫法不是直接讀取w而是w.value的形式

這個和為啥有ref是一個道理,proxy無法攔截基礎類型,所以要加一層value包裝成對象

• vue-next中的computed真的和響應式原理沒關係了嗎

其實有關係,在僅實現computed傳入函數的寫法中,響應式原理啟優化作用

可以看到如果按我們之前的寫法,即便w.value的值沒有變化,我們讀取的時候也會去執行一次fn,當數據量多起來的時候,對性能的影響就大了

那我們怎麼優化呢?

容易想到的就是執行一次fn對比新老值,但這和之前其實就一樣了,因為我們仍然執行了一次fn

這裡我們就可以運用響應式原理,只要內部的影響值test.a被修改了,我們就重新執行fn獲取一次值,不然就讀取之前的存儲的值

reactivity/computed.js

import { setActiveEffect } from './effect';

export function computed(fn) {
  // 變數被改變後此值才會為true 第一次進來時候為true
  let dirty = true;
  // 返回值
  let value;
  // 設置為true表達下次讀取需要重新獲取
  function changeDirty() {
    dirty = true;
  }
  return {
    get value() {
      // 當標誌為true代表變數需要更改
      if (dirty) {
        dirty = false;
        // 將變數控制設置為
        setActiveEffect(changeDirty);
        // 獲取值
        value = fn();
        // 制空依賴
        setActiveEffect('');
      }
      return value;
    },
  };
}
複製代碼

我們定義了一個變數dirty用於表達這個值是否被修改過,修改過就為true

同樣的,我們再每次讀取值之前,將回調函數() => { dirty = true }賦值給中間變數activeEffect,然後再執行fn讀取,此時回調被收集,當對應的屬性更改的時候,dirty也就更改了

我們再運行上面的列子,程式仍然正常運行了

我們來看看targetMap的結構,targetMap存在一個key值{a:1},它的value值也是一個Map,這個Map中存在key值a,這個Map的value便是回調函數function changeDirty() { dirty = true; }

targetMap的圖形結構如下

提取effect

在watch和computed中我們都經歷過 設置回調函數=>讀取值(存儲回調函數)=>清空回調函數 這三個步驟

在vue-next的源碼中這個步驟被提取為了一個公用函數,為了符合vue-next的設計我們將這個步驟提取出來,取名effect

函數的第一個參數是一個函數,函數執行後,會觸發函數中各個變數的讀取,並收集對應的回調函數

函數的第二個參數是一個對象

有一個schedular屬性,表達特殊指定的回調函數,如果沒有這個屬性,回調函數就是第一個參數

有一個lazy屬性,為true時代表第一個參數傳入的函數不用立即執行,預設為false,即立即指定第一個參數傳入的函數

reactivity/effect.js

// 回調函數集合
const targetMap = new WeakMap();

// 當前激活的回調函數
export let activeEffect;

- // 設置當前回調函數
- export function setActiveEffect(effect) {
-  activeEffect = effect;
- }

+ // 設置當前回調函數
+ export function effect(fn, options = {}) {
+   const effectFn = () => {
+     // 設置當前激活的回調函數
+     activeEffect = effectFn;
+     // 執行fn收集回調函數
+     let val = fn();
+     // 制空回調函數
+     activeEffect = '';
+     return val;
+   };
+   // options配置
+   effectFn.options = options;
+   // 預設第一次執行函數
+   if (!options.lazy) {
+     effectFn();
+   }
+   return effectFn;
+ }

// 收集回調函數
export function track(target, key) {
  // 省略
}

// 觸發回調函數
export function trigger(target, key) {
  // 獲取對象的map
  const depsMap = targetMap.get(target);
  if (depsMap) {
    // 獲取對應各個屬性的回調函數集合
    const deps = depsMap.get(key);
    if (deps) {
      // 觸發回調函數
-     deps.forEach((v) => v());
+     deps.forEach((v) => {
+       // 特殊指定回調函數存放在了schedular中
+       if (v.options.schedular) {
+         v.options.schedular();
+       }
+       // 當沒有特意指定回調函數則直接觸發
+       else if (v) {
+         v();
+       }
+     });
    }
  }
}
複製代碼

reactivity/index.js

導出effect

export * from './reactive';
export * from './watch';
export * from './computed';
+ export * from './effect';
複製代碼

main.js

import { reactive, effect } from './reactivity';

const test = reactive({
  a: 1,
});

effect(() => {
  document.title = test.a;
});

setTimeout(() => {
  test.a = 2;
}, 1000);
複製代碼

effect第一次自執行,將() => { document.title = test.a; }這個回調函數放入了test.a中,當test.a改變,觸發對應回調函數

targetMap如圖所示

圖形結構如圖所示

同樣我們更改computed和watch中的寫法,用effect替代

reactivity/computed.js

import { effect } from './effect';

export function computed(fn) {
  // 變數被改變後此值才會為true 第一次進來時候為true
  let dirty = true;
  let value;
  const runner = effect(fn, {
    schedular: () => {
      dirty = true;
    },
    // 第一次不用執行
    lazy: true,
  });
  // 返回值
  return {
    get value() {
      // 當標誌為true代表變數需要更改
      if (dirty) {
        value = runner();
        // 制空依賴
        dirty = false;
      }
      return value;
    },
  };
}
複製代碼

reactivity/watch.js

import { effect } from './effect';

export function watch(fn, cb, options = {}) {
  let oldValue;
  const runner = effect(fn, {
    schedular: () => {
      // 當這個依賴執行的時候 獲取到的是新值
      let newValue = fn();
      // 觸發回調函數
      cb(newValue, oldValue);
      // 新值賦值給舊值
      oldValue = newValue;
    },
    // 第一次不用執行
    lazy: true,
  });
  // 讀取值並收集依賴
  oldValue = runner();
}
複製代碼

main.js

import { reactive, watch, computed } from './reactivity';

const test = reactive({
  a: 1,
});

const w = computed(() => test.a + 1);

watch(
  () => test.a,
  (val) => {
    console.log(val); // 2
  }
);

console.log(w.value); // 2
test.a = 2;
console.log(w.value); // 3
複製代碼

可以看到代碼正常執行,targetMap如圖所示,屬性a中存放了兩個回調函數

targetMap圖形結構如圖所示

補充watch的options

我們來看看這個列子

import { watch, reactive } from './reactivity';

const test = reactive({
  a: {
    b: 1,
  },
});

watch(
  () => test.a,
  (val) => {
    console.log(val); // 沒有觸發
  }
);

test.a.b = 2;
複製代碼

我們用watch觀察了test.a,當我們去改變test.a.b的時候,觀察的回調並沒有觸發,用過vue的同學都會知道,這種情況應該用deep屬性就可以解決

那麼deep是如何實現的呢

我們再來回憶一下回調函數收集的過程

test.a被讀取時,回調函數被收集進了test.a中,但這裡test.a.b並沒有被讀取,所以回調函數自然就沒有被收集進test.a.b

所以我們只用在回調函數收集的時候,深度遍歷一下test,去讀取一下各個屬性即可

這裡還需要註意一點,我們用reactive攔截對象的時候,是不會攔截對象的第二層的

const test = {
  a: {
    b: 1,
  },
};

const observe = new Proxy(test, {
  get(target, key, receiver) {
    return Reflect.set(target, key, receiver);
  },
});

test.a // 觸發攔截
test.a.b // 不會觸發攔截
複製代碼

所以我們需要遞歸的將攔截值用proxy代理

reactivity/reactive.js

const observe = new Proxy(value, {
  // 攔截讀取
  get(target, key, receiver) {
    // 收集回調函數
    track(target, key);
+   const res = Reflect.get(target, key, receiver);
+   return canObserve(res) ? reactive(res) : res;
-   return Reflect.get(target, key, receiver);
  },
  // 攔截設置
  set(target, key, newValue, receiver) {
    const res = Reflect.set(target, key, newValue, receiver);
    // 觸發回調函數
    trigger(target, key);
    return res;
  },
});
複製代碼

reactivity/watch.js

import { effect } from './effect';
+ import { isPlainObject } from './utils';

+ // 深度遍歷值
+ function traverse(value) {
+   if (isPlainObject(value)) {
+     for (const key in value) {
+       traverse(value[key]);
+     }
+   }
+   return value
+ }

export function watch(fn, cb, options = {}) {
+ let oldValue;
+ let getters = fn;
+ // 當存在deep屬性的時候 深度遍歷值
+ if (options.deep) {
+   getters = () => traverse(fn());
+ }
+ const runner = effect(getters, {
- const runner = effect(fn, {
    schedular: () => {
      // 當這個依賴執行的時候 獲取到的是新值
      let newValue = runner();
      // 觸發回調函數
      cb(newValue, oldValue);
      // 新值賦值給舊值
      oldValue = newValue;
    },
    // 第一次不用執行
    lazy: true,
  });
  // 讀取值並收集回調函數
  oldValue = runner();
}
複製代碼

main.js

import { watch, reactive } from './reactivity';

const test = reactive({
  a: {
    b: 1,
  },
});

watch(
  () => test.a,
  (val) => {
    console.log(val); // { b: 2 }
  },
  {
    deep: true,
  }
);

test.a.b = 2;
複製代碼

targetMap如下,我們不僅在對象{ a: { b: 1 } }上添加了回到函數,也在{ b: 1 }上添加了

targetMap圖形結構如圖所示

可以看到加入deep屬性後便可深度觀察數據了,上面的列子中我們都是用的對象,其實深度觀察對數組也是需要的,不過數組的處理有一點不同我們來看