1. 底層實現(xiàn)方式

Vue 2 —Object.defineProperty

Vue 2 在初始化數(shù)據(jù)時，會遍歷對象的每個屬性，通過 Object.defineProperty 定義 getter 和 setter。

當屬性被讀取時進行依賴收集，被修改時觸發(fā)更新。

優(yōu)點：

• ES5 時代最可行的響應式方案
• API 簡單直觀

缺點：

• 不能監(jiān)聽對象的新增/刪除屬性
• 無法監(jiān)聽數(shù)組索引和 length 的變化

初始化時必須遞歸遍歷對象，性能消耗較大

Vue 3 —Proxy

Vue 3 使用了 ES2015 的 Proxy 來代理整個對象，對所有操作（讀取、修改、刪除、遍歷等）進行攔截。

優(yōu)點：

• 支持監(jiān)聽對象屬性的新增、刪除
• 能監(jiān)聽數(shù)組索引、length 變化
• 支持 Map / Set 等原生數(shù)據(jù)結(jié)構(gòu)
• 按需追蹤屬性，性能更好

缺點：

• 需要現(xiàn)代瀏覽器或 ES2015+ 環(huán)境支持

2. 對數(shù)組、對象、Map/Set 的支持

• 在 Vue 2 中：

this.arr[1] = 10; // 無法觸發(fā)更新
Vue.set(this.arr, 1, 10); // 才能觸發(fā)視圖更新

• 在 Vue 3 中：

this.arr[1] = 10; // 直接觸發(fā)更新

3. 性能對比

• Vue 2：初始化時遞歸遍歷整個數(shù)據(jù)對象，即使某個屬性永遠不用，也會被劫持。大數(shù)據(jù)對象場景下會影響性能。
• Vue 3：按需追蹤，只有訪問到的屬性才會被收集依賴，減少無用監(jiān)聽，提高運行效率。

4. 新 API 的支持

• Vue 3 引入了 組合式 API，提供了 ref、reactive、computed、watchEffect 等響應式函數(shù)，讓開發(fā)者可以在邏輯復用和類型推斷方面更加靈活。
• Vue 2 原生只有 Options API，要想用類似 API，需要引入 Vue Composition API 插件。

5. TypeScript 友好度

• Vue 2：類型推斷不夠友好，復雜對象可能需要手動聲明類型。
• Vue 3：Proxy 讓類型推斷更自然，配合組合式 API，TypeScript 體驗提升明顯。

6. 總結(jié)對比表

7. 可視化原理圖

• Vue 2 響應式機制簡圖：

data -> 遍歷每個屬性 -> defineProperty(getter/setter)
讀取屬性 -> 收集依賴
修改屬性 -> 通知視圖更新

• Vue 3 響應式機制簡圖：

data -> Proxy 代理整個對象
讀取任意屬性 -> 收集依賴
修改/新增/刪除屬性 -> 通知視圖更新

8. 寫在最后

Vue 3 的響應式系統(tǒng)幾乎解決了 Vue 2 的所有痛點，同時性能和可維護性都更好。

如果你的項目需要長期維護，并且運行環(huán)境允許，建議直接使用 Vue 3，享受它帶來的更優(yōu)雅的響應式體驗。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論