大家好，我是 V 哥。
Vue 2 和 Vue 3 在響應式原理上存在顯著差異，下面為你詳細介紹。
如果你是前端開發，V 哥建議抓緊入坑鴻蒙，2025年鴻蒙趨勢將引領國產化替代的新征程，大量內推崗位等你來拿。
推薦一本鴻蒙 NEXT 書《鴻蒙 HarmonyOS 開發之路》卷1，可以讓你少走彎路。
image.png
Vue 2 響應式原理
Vue 2 使用 Object.defineProperty() 方法來實現響應式系統。該方法可以直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，并返回這個對象。
實現原理
-
核心方法：
Object.defineProperty()劫持對象屬性的getter和setter。當一個 Vue 實例創建時，Vue 會遍歷data選項中的所有屬性，使用Object.defineProperty()將這些屬性轉換為getter/setter。 -
依賴收集：當訪問這些屬性時，觸發
getter，進行依賴收集；當屬性值發生變化時，觸發setter，通知所有依賴更新。
示例代碼
// 模擬 Vue 2 的響應式原理
function defineReactive(obj, key, val) {
// 存儲依賴的數組
const dep = [];
Object.defineProperty(obj, key, {
get() {
// 收集依賴
if (Dep.target) {
dep.push(Dep.target);
}
return val;
},
set(newVal) {
if (newVal !== val) {
val = newVal;
// 通知所有依賴更新
dep.forEach(watcher => watcher.update());
}
}
});
}
// 模擬 Watcher
class Watcher {
constructor() {
Dep.target = this;
}
update() {
console.log('數據更新，觸發視圖更新');
}
}
// 全局變量，用于存儲當前正在收集依賴的 Watcher
Dep.target = null;
// 創建一個對象
const obj = {};
// 使對象的屬性變為響應式
defineReactive(obj, 'message', 'Hello, Vue 2!');
// 創建一個 Watcher
new Watcher();
// 訪問屬性，觸發 getter 進行依賴收集
console.log(obj.message);
// 修改屬性，觸發 setter 通知依賴更新
obj.message = 'New message';
局限性
-
無法檢測對象屬性的添加和刪除：因為
Object.defineProperty()是對對象已有屬性進行劫持，新增或刪除屬性時無法自動觸發響應式更新。 -
無法檢測數組的某些變化：Vue 2 對數組的
push、pop等方法進行了重寫，但對于通過索引直接修改數組元素或修改數組長度的操作無法檢測。
Vue 3 響應式原理
Vue 3 使用 ES6 的 Proxy 對象來實現響應式系統。Proxy 對象用于創建一個對象的代理，從而可以對該對象的基本操作進行攔截和自定義。
實現原理
-
核心方法：
Proxy可以攔截對象的各種操作，包括屬性讀取、屬性設置、屬性刪除等。Vue 3 通過創建一個Proxy對象來代理data對象，當對代理對象進行操作時，會觸發相應的攔截器。 - 依賴收集和更新：在攔截器中進行依賴收集和更新通知，實現響應式。
示例代碼
// 模擬 Vue 3 的響應式原理
function reactive(target) {
// 存儲依賴的 WeakMap
const targetMap = new WeakMap();
function track(target, key) {
let depsMap = targetMap.get(target);
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()));
}
let dep = depsMap.get(key);
if (!dep) {
depsMap.set(key, (dep = new Set()));
}
if (activeEffect) {
dep.add(activeEffect);
}
}
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return;
const dep = depsMap.get(key);
if (dep) {
dep.forEach(effect => effect());
}
}
return new Proxy(target, {
get(target, key) {
// 收集依賴
track(target, key);
return target[key];
},
set(target, key, value) {
target[key] = value;
// 通知依賴更新
trigger(target, key);
return true;
}
});
}
// 模擬 effect
let activeEffect;
function effect(fn) {
activeEffect = fn;
fn();
activeEffect = null;
}
// 創建一個對象
const obj = { message: 'Hello, Vue 3!' };
// 使對象變為響應式
const reactiveObj = reactive(obj);
// 創建一個 effect
effect(() => {
console.log(reactiveObj.message);
});
// 修改屬性，觸發響應式更新
reactiveObj.message = 'New message';
優勢
-
可以檢測對象屬性的添加和刪除：
Proxy可以攔截對象屬性的添加和刪除操作，從而實現響應式更新。 -
可以檢測數組的所有變化：
Proxy可以攔截數組的所有操作，包括通過索引直接修改數組元素和修改數組長度。
所以，Vue 3 的響應式原理相比 Vue 2 更加完善和強大，解決了 Vue 2 中存在的一些局限性。
Vue 2 和 Vue 3 的響應式原理對性能有什么影響？
Vue 2 和 Vue 3 的響應式原理在多個方面對性能產生不同的影響，下面從初始化性能、更新性能、內存占用等方面進行詳細分析。
初始化性能
Vue 2
-
原理特點：Vue 2 使用
Object.defineProperty()對data選項中的每個屬性進行遞歸遍歷，并將其轉換為getter/setter。這意味著在初始化時，需要對對象的所有屬性進行處理，對于嵌套層級較深的對象，會帶來較大的性能開銷。 -
性能影響：當數據對象非常大且嵌套層級很深時，初始化過程會比較耗時，因為需要為每個屬性都調用
Object.defineProperty()方法。例如，一個包含大量嵌套對象和數組的復雜數據結構，初始化時會顯著增加 CPU 的計算負擔。
Vue 3
-
原理特點：Vue 3 使用
Proxy對象來實現響應式。Proxy是對整個對象進行代理，不需要對每個屬性進行遞歸處理。在初始化時，只需要創建一個Proxy對象，當訪問對象的屬性時才會進行依賴收集。 - 性能影響：相比 Vue 2，Vue 3 的初始化性能有明顯提升，尤其是對于大型數據對象。因為它避免了對所有屬性的遞歸處理，減少了初始化時的計算量。
更新性能
Vue 2
-
原理特點：當修改 Vue 2 中響應式對象的屬性時，會觸發
setter方法，通知所有依賴更新。但由于Object.defineProperty()的局限性，對于對象屬性的添加和刪除以及數組的某些操作（如通過索引直接修改數組元素），無法自動檢測，需要使用特殊的方法（如Vue.set、Vue.delete）來觸發更新。 -
性能影響：在更新操作時，如果使用不當，可能會導致不必要的更新或無法及時更新。而且，由于依賴收集是基于屬性的
getter和setter，對于嵌套層級較深的對象，更新時可能需要層層觸發setter，性能開銷較大。
Vue 3
-
原理特點：Vue 3 的
Proxy可以攔截對象的各種操作，包括屬性的添加、刪除和數組的所有操作。當修改響應式對象時，Proxy會立即捕獲到變化，并通知所有依賴更新。 -
性能影響：Vue 3 的更新性能更加穩定和高效。它能夠更準確地檢測到對象的變化，避免了 Vue 2 中因操作不當導致的更新問題。同時，由于
Proxy的攔截機制，更新操作的響應速度更快，減少了不必要的性能損耗。
內存占用
Vue 2
-
原理特點：由于 Vue 2 需要為每個屬性創建
getter/setter，并且需要維護一個依賴收集系統，這會增加額外的內存開銷。對于大型數據對象，每個屬性都有對應的getter/setter和依賴信息，會占用較多的內存空間。 - 性能影響：在處理大量數據時，Vue 2 的內存占用可能會成為性能瓶頸，尤其是在內存有限的設備上，可能會導致頁面卡頓或崩潰。
Vue 3
-
原理特點：Vue 3 的
Proxy只需要為整個對象創建一個代理，不需要為每個屬性添加額外的getter/setter，因此內存占用相對較少。同時，Vue 3 的依賴收集系統也進行了優化，減少了不必要的內存開銷。 - 性能影響：Vue 3 在內存使用上更加高效，能夠更好地處理大型數據對象，減少了因內存占用過高導致的性能問題。
所以我們可以看到，Vue 3 的響應式原理在初始化性能、更新性能和內存占用方面都優于 Vue 2，尤其是在處理大型數據對象時，性能提升更為明顯。
最后
如果你還在老項目中使用 Vue2，V 哥強烈建議更新成 Vue3，老項目的兼容性也許會給你帶來一些麻煩，請相信，相比Vue3帶來的性能提升，會大大提高系統的用戶體驗，不防試試。關注威哥愛編程，全棧開發就你行。
