Vue2剝絲抽繭-響應式系統(tǒng)
目前工作中大概有 40% 的需求是在用 Vue2 的技術棧，所謂知其然更要知其所以然，為了更好的使用 Vue 、更快的排查問題，最近學習了源碼相關的一些知識，雖然網(wǎng)上總結 Vue 的很多很多了，不少自己一個，但也不多自己一個，歡迎一起討論學習，發(fā)現(xiàn)問題歡迎指出。
響應式系統(tǒng)要干什么
回到最簡單的代碼：
data = {
text: 'hello, world'
}
const updateComponent = () => {
console.log('收到', data.text);
}
updateComponent()
data.text = 'hello, liang'
// 運行結果
// 收到 hello, world響應式系統(tǒng)要做的事情：某個依賴了 data 數(shù)據(jù)的函數(shù)，當所依賴的 data 數(shù)據(jù)改變的時候，該函數(shù)要重新執(zhí)行。
我們期望的效果：當上邊 data.text 修改的時候， updateComponent 函數(shù)再執(zhí)行一次。
- 為了實現(xiàn)響應式系統(tǒng)，我們需要做兩件事情：
- 知道 data 中的數(shù)據(jù)被哪些函數(shù)依賴
data 中的數(shù)據(jù)改變的時候去調用依賴它的函數(shù)們
為了實現(xiàn)第 1 點，我們需要在執(zhí)行函數(shù)的時候，將當前函數(shù)保存起來，然后在讀取數(shù)據(jù)的時候將該函數(shù)保存到當前數(shù)據(jù)中。
第 2 點就迎刃而解了，當修改數(shù)據(jù)的時候將保存起來的函數(shù)執(zhí)行一次即可。
在讀取數(shù)據(jù)和修改數(shù)據(jù)的時候需要做額外的事情，我們可以通過 Object.defineProperty() 重寫對象屬性的 get 和 set 函數(shù)。
響應式數(shù)據(jù)
我們來寫一個函數(shù)，重寫屬性的 get 和 set 函數(shù)。
/**
* Define a reactive property on an Object.
*/
export function defineReactive(obj, key, val) {
const property = Object.getOwnPropertyDescriptor(obj, key);
// 讀取用戶可能自己定義了的 get、set
const getter = property && property.get;
const setter = property && property.set;
// val 沒有傳進來話進行手動賦值
if ((!getter || setter) && arguments.length === 2) {
val = obj[key];
}
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
const value = getter ? getter.call(obj) : val;
/*********************************************/
// 1.這里需要去保存當前在執(zhí)行的函數(shù)
/*********************************************/
return value;
},
set: function reactiveSetter(newVal) {
const value = getter ? getter.call(obj) : val;
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
/*********************************************/
// 2.將依賴當前數(shù)據(jù)依賴的函數(shù)執(zhí)行
/*********************************************/
},
});
}
為了調用更方便，我們把第 1 步和第 2 步的操作封裝一個 Dep 類。
export default class Dep {
static target; //當前在執(zhí)行的函數(shù)
subs; // 依賴的函數(shù)
constructor() {
this.subs = []; // 保存所有需要執(zhí)行的函數(shù)
}
addSub(sub) {
this.subs.push(sub);
}
depend() {
// 觸發(fā) get 的時候走到這里
if (Dep.target) {
// 委托給 Dep.target 去調用 addSub
Dep.target.addDep(this);
}
}
notify() {
for (let i = 0, l = this.subs.length; i < l; i++) {
this.subs[i].update();
}
}
}
Dep.target = null; // 靜態(tài)變量，全局唯一我們將當前執(zhí)行的函數(shù)保存到 Dep 類的 target 變量上。
保存當前正在執(zhí)行的函數(shù)
為了保存當前的函數(shù)，我們還需要寫一個 Watcher 類，將需要執(zhí)行的函數(shù)傳入，保存到 Watcher 類中的 getter 屬性中，然后交由 Watcher 類負責執(zhí)行。
這樣在 Dep 類中， subs 中保存的就不是當前函數(shù)了，而是持有當前函數(shù)的 Watcher 對象。
import Dep from "./dep";
export default class Watcher {
constructor(Fn) {
this.getter = Fn;
this.get();
}
/**
* Evaluate the getter, and re-collect dependencies.
*/
get() {
Dep.target = this; // 保存包裝了當前正在執(zhí)行的函數(shù)的 Watcher
let value;
try {
// 調用當前傳進來的函數(shù)，觸發(fā)對象屬性的 get
value = this.getter.call();
} catch (e) {
throw e;
}
return value;
}
/**
* Add a dependency to this directive.
*/
addDep(dep) {
// 觸發(fā) get 后會走到這里，收集當前依賴
// 當前正在執(zhí)行的函數(shù)的 Watcher 保存到 dep 中的 subs 中
dep.addSub(this);
}
/**
* Subscriber interface.
* Will be called when a dependency changes.
*/
// 修改對象屬性值的時候觸發(fā) set，走到這里
update() {
this.run();
}
/**
* Scheduler job interface.
* Will be called by the scheduler.
*/
run() {
this.get();
}
}
Watcher 的作用就是將正在執(zhí)行的函數(shù)通過 Watcher 包裝后保存到 Dep.target 中，然后調用傳進來的函數(shù)，此時觸發(fā)對象屬性的 get 函數(shù)，會收集當前 Watcher 。
如果未來修改對象屬性的值，會觸發(fā)對象屬性的 set ，接著就會調用之前收集到的 Watcher 對象，通過 Watcher 對象的 uptate 方法，來調用最初執(zhí)行的函數(shù)。
響應式數(shù)據(jù)
回到我們之前沒寫完的 defineReactive 函數(shù)，按照上邊的思路，我們來補全一下。
import Dep from "./dep";
/**
* Define a reactive property on an Object.
*/
export function defineReactive(obj, key, val) {
const property = Object.getOwnPropertyDescriptor(obj, key);
// 讀取用戶可能自己定義了的 get、set
const getter = property && property.get;
const setter = property && property.set;
// val 沒有傳進來話進行手動賦值
if ((!getter || setter) && arguments.length === 2) {
val = obj[key];
}
/*********************************************/
const dep = new Dep(); // 持有一個 Dep 對象，用來保存所有依賴于該變量的 Watcher
/*********************************************/
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
const value = getter ? getter.call(obj) : val;
/*********************************************/
// 1.這里需要去保存當前在執(zhí)行的函數(shù)
if (Dep.target) {
dep.depend();
}
/*********************************************/
return value;
},
set: function reactiveSetter(newVal) {
const value = getter ? getter.call(obj) : val;
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
/*********************************************/
// 2.將依賴當前數(shù)據(jù)依賴的函數(shù)執(zhí)行
dep.notify();
/*********************************************/
},
});
}
Observer 對象
我們再寫一個 Observer 方法，把對象的全部屬性都變成響應式的。
export class Observer {
constructor(value) {
this.walk(value);
}
/**
* 遍歷對象所有的屬性，調用 defineReactive
* 攔截對象屬性的 get 和 set 方法
*/
walk(obj) {
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i]);
}
}
}
我們提供一個 observe 方法來負責創(chuàng)建 Observer 對象。
export function observe(value) {
let ob = new Observer(value);
return ob;
}測試
將上邊的方法引入到文章最開頭的例子，來執(zhí)行一下：
import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
text: "hello, world",
};
// 將數(shù)據(jù)變成響應式的
observe(data);
const updateComponent = () => {
console.log("收到", data.text);
};
// 當前函數(shù)由 Watcher 進行執(zhí)行
new Watcher(updateComponent);
data.text = "hello, liang";此時就會輸出兩次了~
收到 hello, world
收到 hello, liang
說明我們的響應式系統(tǒng)成功了。
總結
先從整體理解了響應式系統(tǒng)的整個流程：
每個屬性有一個 subs 數(shù)組，Watcher 會持有當前執(zhí)行的函數(shù)，當讀取屬性的時候觸發(fā) get ，將當前 Watcher 保存到 subs 數(shù)組中，當屬性值修改的時候，再通過 subs 數(shù)組中的 Watcher 對象執(zhí)行之前保存的函數(shù)。
