前言

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 = https://www.cnblogs.com/chengxuyuanaa/p/1;
Object.defineProperty(obj, 'a', {
  enumerable: true,
  configurable: true,
  get() {
    console.log('我被讀取了');
    return aValue;
  },
  set(value) {
    console.log('我被設定了');
    aValue = https://www.cnblogs.com/chengxuyuanaa/p/value;
  },
});

obj.a; // 我被讀取了
obj.a = 2; // 我被設定了
復制代碼

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

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

無法攔截在物件上屬性的新增和洗掉
無法攔截在陣列上呼叫push pop shift unshift等對當前陣列會產生影響的方法
攔截陣列索引過大的性能開銷
無法攔截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 = https://www.cnblogs.com/chengxuyuanaa/p/fn();
    // 觸發回呼函式
    cb(newValue, oldValue);
    // 新值賦值給舊值
    oldValue = https://www.cnblogs.com/chengxuyuanaa/p/newValue;
  });
  // 讀取值并收集回呼函式
  oldValue = https://www.cnblogs.com/chengxuyuanaa/p/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 = https://www.cnblogs.com/chengxuyuanaa/p/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 = https://www.cnblogs.com/chengxuyuanaa/p/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 = https://www.cnblogs.com/chengxuyuanaa/p/fn();
      // 觸發回呼函式
      cb(newValue, oldValue);
      // 新值賦值給舊值
      oldValue = https://www.cnblogs.com/chengxuyuanaa/p/newValue;
    },
    // 第一次不用執行
    lazy: true,
  });
  // 讀取值并收集依賴
  oldValue = https://www.cnblogs.com/chengxuyuanaa/p/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 = https://www.cnblogs.com/chengxuyuanaa/p/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屬性后便可深度觀察資料了,上面的列子中我們都是用的物件,其實深度觀察對陣列也是需要的,不過陣列的處理有一點不同我們來看看不同點

陣列的處理

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

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

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

test[0] = 2;
復制代碼

上面的列子是不會觸發的,因為我們只讀取了test,targetMap里面啥也沒有

所以在陣列的情況下,我們也屬于deep深度觀察范疇,深度遍歷的時候,需要讀取陣列的每一項

reactivity/watch.js

// 深度遍歷值
function traverse(value) {
  // 處理物件
  if (isPlainObject(value)) {
    for (const key in value) {
      traverse(value[key]);
    }
  }
+ // 處理陣列
+ else if (Array.isArray(value)) {
+   for (let i = 0; i < value.length; i++) {
+     traverse(value[i]);
+   }
+ }
  return value;
}
復制代碼

main.js

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

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

watch(
  () => test,
  (val) => {
    console.log(val); // [2, 2, 3]
  },
  {
    deep: true
  }
);

test[0] = 2;
復制代碼

在上面的列子中添加deep為true可以看見回呼觸發了

targetMap如圖所示

第一項Set是一個Symbol(Symbol.toStringTag),我們不用管它

我們將陣列的每一項都進行了回呼函式的儲存,且也在陣列的length屬性上也進行了存盤

我們再來看一個列子

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

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

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

test[3] = 4;
復制代碼

上面的列子不會觸發,細心的同學可能記得,我們targetMap里面只收集了索引為0 1 2的三個位置,新增的索引為3的并沒有收集

我們應該如何處理這種臨界的情況呢?

大家還記得我們最初講到的在proxy下陣列pop方法的決議嗎,當時我們歸納為了一句話

對陣列的本身有長度影響的時候length會被讀取和重新設定

現在我們通過索引新增值其實也是改變了陣列本身的長度,所以length會被重新設定,現在就有方法了,我們在新增索引上找不到回呼函式的時候,我們可以去讀取陣列length上存盤的回呼函式

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;
  },
  // 攔截設定
  set(target, key, newValue, receiver) {
+   const hasOwn = target.hasOwnProperty(key);
+   const oldValue = https://www.cnblogs.com/chengxuyuanaa/p/Reflect.get(target, key, receiver);
    const res = Reflect.set(target, key, newValue, receiver);
+   if (hasOwn) {
+     // 設定之前的屬性
+     trigger(target, key, 'set');
+   } else if (oldValue !== newValue) {
+     // 添加新的屬性
+     trigger(target, key, 'add');
+   }
-   // 觸發回呼函式
-   trigger(target, key);
    return res;
  },
});
復制代碼

我們用hasOwnProperty判斷當前屬性是否在物件上,對于陣列的新增索引很明顯是不在的,此時會走到trigger(target, key, 'add');這個函式

reactivity/effect.js

// 觸發回呼函式
export function trigger(target, key, type) {
  // 獲取物件的map
  const depsMap = targetMap.get(target);
  if (depsMap) {
    // 獲取對應各個屬性的回呼函式集合
-   const deps = depsMap.get(key);
+   let deps = depsMap.get(key);
+   // 當陣列新增屬性的時候 直接獲取length上存盤的回呼函式
+   if (type === 'add' && Array.isArray(target)) {
+     deps = depsMap.get('length');
+   }
    if (deps) {
      // 觸發回呼函式
      deps.forEach((v) => {
        // 特殊指定回呼函式存放在了schedular中
        if (v.options.schedular) {
          v.options.schedular();
        }
        // 當沒有特意指定回呼函式則直接觸發
        else if (v) {
          v();
        }
      });
    }
  }
}
復制代碼

然后我們處理type為add的情況,當type是add且物件為陣列的時候,我們便去讀取length上存盤的回呼函式

可以看到這么一改寫,列子就可以正常運行了

總結

1.其實讀完本文后,你會發現本文不是一篇vue原始碼解剖,我們全程沒有貼出vue-next中對應的原始碼,因為我覺得從零開始的思路去思考如何實作會比從原始碼解讀去思考為什么這么實作會好點

2.當然本文也只實作了簡易的回應式原理,如果你想查看完整的代碼可以點擊這里,雖然很多功能點也沒實作,但大體思路都是一致的,如果你能讀懂本問講解的思路,你肯定能看懂vue-next中對應的原始碼
3.最近很多人私信我問前端問題，博客登陸的少沒及時回復，為此我建了個前端扣扣裙 519293536 大家以后有問題直接群里找我，都會盡力幫大家，博客私信我很少看

本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/62341.html

標籤：JavaScript

上一篇：如何用vue-cli4.0構建多頁面模板腳手架!？本文實戰教你

下一篇：如何用Node中的Express應用框架的技術選型？本文詳解