vue2響應式是通過object.defineproperty()劫持各個屬性 getter 和 setter，在資料變化時發布訊息給訂閱者，觸發相應的監聽**。
存在幾個問題：
初始化時需要遍歷物件所有 key，如果物件層次較深，效能不好通知更新過程需要維護大量 dep 例項和 watcher 例項，額外占用記憶體較多
object.defineproperty 無法監聽到陣列元素的變化，只能通過劫持重寫數方法
動態新增，刪除物件屬性無法攔截，只能用特定 set/delete 等api 代替
不支援 map、set 等資料結構
vue3中使用原生的proxy代替，支援監聽物件和陣列的變化，並且多達13種攔截方法，動態屬性增刪都可以攔截，新增資料結構全部支援，物件巢狀屬性只**第一層，執行時遞迴，用到才**，也不需要維護特別多的依賴關係，效能取得很大進步
總結proxy 代替 defineproperty
object.defineproperty 是 es5 的方法，proxy 是 es6 的方法defineproperty 不能監聽到陣列下標變化和物件新增屬性，proxy 可以
defineproperty 是劫持物件屬性，proxy 是**整個物件
defineproperty 侷限性大，只能針對單屬性監聽，所以在一開始就要全部遞迴監聽。proxy 物件巢狀屬性執行時遞迴，用到才**，也不需要維護特別多的依賴關係，效能提公升很大，且首次渲染更快
defineproperty 會汙染原物件，修改時是修改原物件，proxy 是對原物件進行**並會返回乙個新的**物件，修改的是**物件
defineproperty 不相容 ie8，proxy 不相容 ie11
Vue3響應式原理與Vue2的對比
源資料 let person region 模擬vue2中實現響應式 let p object.defineproperties p,name 有人修改name時呼叫 set value object.defineproperties p,age 有人修改name時呼叫 set value endr...
Vue2和Vue3的區別
vue2 的雙向資料繫結是利用es5 的乙個 api object.definepropert 對資料進行劫持 結合 發布訂閱模式的方式來實現的。vue3 中使用了 es6 的 proxyapi 對資料 相比於vue2.x，使用proxy的優勢如下 1 defineproperty只能監聽某個屬性，...
vue2和vue3的區別
vue2 vue3 安裝npm install vue cli g npm install vue cli g 解除安裝npm install vue cli g npm install vue cli g 圖形介面 vue ui 無圖形介面 建立專案 vue init webpack demo v...