Vue3響應式原理與Vue2的對比

2022-09-19 16:24:11 字數 581 閱讀 4845

// 源資料

let person =

//#region

// 模擬vue2中實現響應式

// let p = {}

// object.defineproperties(p, 'name', ,

//     // 有人修改name時呼叫

//     set(value)

// })

// object.defineproperties(p, 'age', ,

//     // 有人修改name時呼叫

//     set(value)

​// })

//#endregion

//模擬vue3中實現響應式

// p為person的**物件

const p = new proxy(person,,

// 有人修改p的某個屬性,或給p追加某個屬性時呼叫

set(target,propname,value),

// 有人刪除p的某個屬性時呼叫

deleteproperty(target,propname)

})

Vue3 和 Vue2 的響應式原理區別

vue2響應式是通過object.defineproperty 劫持各個屬性 getter 和 setter,在資料變化時發布訊息給訂閱者,觸發相應的監聽 存在幾個問題 初始化時需要遍歷物件所有 key,如果物件層次較深,效能不好 通知更新過程需要維護大量 dep 例項和 watcher 例項,額外...

vue2與vue3的區別

vue2和vue3開發元件有什麼區別 vue2和vue3雙向資料繫結的區別 vue2的雙向資料繫結是利用es5 的乙個 apiobject.definepropert 對資料進行劫持 結合 發布訂閱模式的方式來實現的。vue3中使用了 es6 的proxyapi 對資料 相比於vue2.x,使用pr...

Vue2與Vue3的區別

vue2和vue3開發元件有什麼區別 vue2和vue3雙向資料繫結的區別 vue2的雙向資料繫結是利用es5 的乙個 apiobject.definepropert 對資料進行劫持 結合 發布訂閱模式的方式來實現的。vue3中使用了 es6 的proxyapi 對資料 相比於vue2.x,使用pr...