vue2 x的data響應式原理

proxy 相容性不好，且無法polyfill ，vue2.x還會存在一段時間

監聽物件，監聽陣列，複雜物件，深度監聽

function

definereactive
(target,key,value)
,set
(newvalue)}}
)}

無法監聽新增屬性/刪除屬性（vue.set vue.delete）

無法原生監聽陣列，需要特殊處理

重新定義陣列原型

const oldarrayproperty=array.prototype

//建立新物件，原型指向oldarrayproperty,在擴充套件的方法不會影響原型
const arrproto=object.
create
(oldarrayproperty)
['push'
,'pop'
,'shft'
,'unshift'
,'splice'].
foreach
(methodname=>})
//監聽物件屬性
function
observer
(target)
if(array.
isarray
(target)
)//重新定義各個屬性（for in 也可以遍歷陣列）
for(
let key in target)
}

Vue2 x 響應式原理 簡單實現

根據上圖的概要邏輯，進行簡單實現 vue模擬實現 class myvue 4.建立compile newcompiler this el,this 對vue例項中的data物件進行 proxy attr get 觀察者 觀察,監聽 class watcher getoldval update 發布者...

Vue2 x與Vue3 x的雙向繫結原理

通過object.defineproperty 重新定義物件屬性的set方法 get方法來實現的，從這個屬性中取值時會觸發get方法，改變這個屬性時會觸發set方法，所以我們只要將一些需要更新view的方法放在這裡面就可以實現data更新view了,而view更新data其實可以通過事件監聽實現 o...

vue2 x 是怎麼讓普通物件變為 響應式物件的呢

function initdata vm if isplainobject data process.env.node env production warn data functions should return an object n vm proxy data on instance var...