Vue.js 的響應式原理是其核心特性之一，使得數據變化能夠自動更新到視圖。Vue 的響應式系統主要依賴于 Object.defineProperty（在 Vue 2.x 中）和 Proxy（在 Vue 3.x 中）來實現數據的觀察和更新。以下是對 Vue 響應式原理的詳細解釋。
1. Vue 2.x 的響應式原理
在 Vue 2.x 中，Vue 使用 Object.defineProperty 來實現數據的響應式。
1.1 數據劫持
當 Vue 實例被創建時，它會遍歷 data 對象的所有屬性，并使用 Object.defineProperty 將每個屬性轉換為 getter 和 setter。這樣，當屬性被訪問或修改時，Vue 可以執行相應的邏輯。
function defineReactive(obj, key, val) {const dep = new Dep(); // 創建一個依賴收集器// 遞歸處理嵌套對象let childOb = observe(val);Object.defineProperty(obj, key, {enumerable: true,configurable: true,get() {// 添加依賴if (Dep.target) {dep.depend(); // 依賴收集if (childOb) {childOb.dep.depend(); // 處理數組的依賴}}return val;},set(newVal) {if (newVal === val) return;val = newVal;childOb = observe(newVal); // 處理新值的響應式dep.notify(); // 通知所有依賴更新}});
}
1.2 依賴收集
當組件渲染時，Vue 會將當前的渲染 watcher 作為 Dep.target 存儲。每當訪問一個響應式屬性時，getter 會被調用，依賴會被收集到 Dep 中。
1.3 觸發更新
當屬性的 setter 被調用時，Vue 會通知所有依賴于該屬性的 watcher 進行更新。這樣，視圖就會自動更新。
2. Vue 3.x 的響應式原理
在 Vue 3.x 中，Vue 使用 Proxy 來實現響應式，提供了更強大的功能和更好的性能。
2.1 使用 Proxy
Proxy 可以直接監聽對象的所有操作（如讀取、寫入、刪除等），而不需要逐個屬性地定義 getter 和 setter。
function reactive(target) {return new Proxy(target, {get(target, key, receiver) {// 依賴收集const res = Reflect.get(target, key, receiver);track(target, key); // 依賴收集return res;},set(target, key, value, receiver) {const oldValue = target[key];const result = Reflect.set(target, key, value, receiver);if (oldValue !== value) {trigger(target, key); // 觸發更新}return result;}});
}
2.2 依賴收集與觸發更新
在 Vue 3.x 中，依賴收集和觸發更新的邏輯被封裝在 track 和 trigger 函數中。track 函數用于收集依賴，而 trigger 函數用于通知依賴更新。
3. 響應式系統的優缺點
優點
- 自動更新：數據變化時，視圖會自動更新，減少了手動 DOM 操作的復雜性。
- 高效：Vue 3.x 的 Proxy 實現比 Vue 2.x 的 Object.defineProperty 更高效，能夠處理更復雜的對象結構。
缺點
- 性能開銷：在大量數據變化時，依賴收集和更新可能會帶來性能開銷。
- 限制：Vue 2.x 中，
Object.defineProperty無法監聽數組的變化（如數組的索引和長度），而 Vue 3.x 的 Proxy 則可以更好地處理這些情況。
4. 總結
Vue 的響應式原理通過數據劫持和依賴收集，使得數據變化能夠自動反映到視圖上。Vue 2.x 使用 Object.defineProperty 實現響應式，而 Vue 3.x 則使用 Proxy，提供了更強大的功能和更好的性能。理解這些原理有助于更好地使用 Vue 進行開發，并優化應用的性能。
