同學：談談你對 vue2 響應式原理的理解
作者：前端歷險記
Vue 2 的響應式系統通過對象劫持、依賴收集、和更新通知機制來實現數據驅動視圖的更新。以下是實現的大致步驟。
Vue 2 的響應式系統通過對象劫持、依賴收集、和更新通知機制來實現數據驅動視圖的更新。以下是實現的大致步驟（當然具體的實現復雜得多）：
一、對象劫持（Object.defineProperty）
1. 定義響應式對象
使用 Object.defineProperty 對對象的每個屬性進行劫持。Vue 2 會為每個屬性定義 getter 和 setter，以便在屬性被訪問或修改時觸發相應的邏輯。
function defineReactive(obj, key, val) {
const dep = new Dep(); // 用于管理依賴
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
if (Dep.target) {
dep.addSub(Dep.target); // 添加當前 watcher 作為依賴
}
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
dep.notify(); // 通知所有依賴更新
}
});
}2. 遞歸劫持嵌套對象
如果屬性的值是對象，Vue 2 需要遞歸地將這些對象轉化為響應式對象。通過遍歷對象的所有屬性來實現。
function observe(value) {
if (!value || typeof value !== 'object') return;
return new Observer(value);
}
class Observer {
constructor(value) {
this.value = value;
this.walk(value);
}
walk(obj) {
Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]));
}
}二、依賴收集與通知
1. 依賴管理（Dep 類）
Dep 類用于管理所有依賴（即 Watcher 實例）。每當一個屬性被訪問時，它會將當前 Watcher 實例添加到依賴列表中。當屬性值變化時，Dep 會通知所有依賴進行更新。
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}2. Watcher 類
Watcher 類是 Vue 2 響應式系統的核心。它用于接收數據變化通知并更新視圖。
class Watcher {
constructor(updateFn) {
this.update = updateFn;
Dep.target = this;
// 觸發 getter 以便收集依賴
this.value = this.get();
Dep.target = null;
}
get() {
// 訪問數據屬性觸發 getter
}
update() {
// 數據變化時的處理邏輯
this.get();
}
}三、計算屬性與偵聽器
、1. 計算屬性（Computed Properties）
計算屬性是基于響應式數據的緩存值。Vue 2 會自動緩存計算屬性的結果，直到它依賴的響應式數據發生變化。
computed: {
doubledValue() {
return this.value * 2;
}
}在實現上，計算屬性會創建一個專門的 Watcher 實例，并在依賴的屬性發生變化時重新計算其值。
2. 偵聽器（Watchers）
偵聽器用于觀察數據變化并執行指定的回調函數。
watch: {
value(newValue, oldValue) {
// 當 value 發生變化時執行的邏輯
}
}四、模板編譯
Vue 2 的模板編譯過程將模板轉換成渲染函數，并利用響應式系統來實現數據驅動的視圖更新。渲染函數會訪問組件的數據屬性，觸發依賴收集和視圖更新。
function compileTemplate(template) {
// 編譯模板為渲染函數
return function render() {
// 渲染邏輯
};
}在渲染過程中，模板中的數據綁定會觸發屬性的 getter，自動收集依賴。當數據變化時，Watcher 會重新計算并更新視圖。
五、響應式數據的訪問與更新
1. 訪問數據
當訪問一個響應式屬性時，getter 會被觸發，當前的 Watcher 會被添加到依賴列表中。
function get() {
// 訪問數據屬性觸發 getter
return this.value;
}2. 更新數據
當設置響應式屬性的值時，setter 會被觸發，更新數據并通知所有依賴進行更新。
function set(newVal) {
if (newVal !== this.value) {
this.value = newVal;
this.dep.notify(); // 通知所有依賴
}
}總結
- 對象劫持：通過 Object.defineProperty 劫持對象的屬性，實現對屬性的讀寫操作的攔截。
- 遞歸劫持：遞歸地將嵌套對象轉化為響應式對象。
- 依賴管理：Dep 類用于管理和通知依賴。
- 計算屬性與偵聽器：緩存計算屬性，利用偵聽器響應數據變化。
- 模板編譯：將模板編譯為渲染函數，自動更新視圖。
這些細節使 Vue 2 能夠高效地實現雙向數據綁定和響應式更新，確保視圖和數據的一致性。
責任編輯：趙寧寧
來源：
前端歷險記
