vue2 0響應式原理的應用

監測屬性的變化

function

observe
(target)
//對物件中的每乙個屬性進行監視
for(
let key in target)
}function
definereactive
(target,key,value)
,set
(newval)}}
)}function
updateview()
let data=
observe
(data)
;data.name=
"lingyan"
;

function

observe
(target)
//對物件中的每乙個屬性進行監視
for(
let key in target)
}function
definereactive
(target,key,value)
,set
(newval)}}
)}function
updateview()
let data=
}observe
(data)
;data.name=
;data.name.m=
30;

如果屬性值也是乙個物件：

function

observe
(target)
//對物件中的每乙個屬性進行監視
for(
let key in target)
}function
definereactive
(target,key,value)
,set
(newval)}}
)}function
updateview()
let data=}}
observe
(data)
;data.name.m=
;data.name.m.n=
30;

陣列的監測

let oldarrayprototype=array.prototype;

let proto=object.
create
(oldarrayprototype);[
'push'
,'shift'
,'unshift'
,'splice'].
foreach
(method=>})
function
observe
(target)
if(array.
isarray
(target))}
//對物件中的每乙個屬性進行監視
for(
let key in target)
}function
definereactive
(target,key,value)
,set
(newval)}}
)}function
updateview()
let data=
observe
(data)
;data.name.
push(5
);

Vue2 0響應式原理

最近vue3.0響應式原理引起前端陣陣狂熱，所以我也下定決心將vue的響應式原理總結一下。我們都知道vue2.0的響應式原理使用的乙個核心api是object.defineproperty.為我們要觀察的資料設定getter和setter方法。我們可以看到如果響應式的資料多的時候，我們需要迴圈遍歷d...

手寫Vue2 0響應式原理

今天來實現乙個簡易版的vue2.0響應式 class vue 響應化 this.observe this.data 測試 new watcher this,test this.test 建立編譯器 new compile options.el,this if options.created 遞迴遍歷...

Vue 2 0中的響應式原理實現

主要原理 使用object.defineproperty方法給物件的每乙個屬性註冊 get 和set方法，在set方法中執行render方法進行頁面重新渲染 let obj 定義響應式，此方法用來對某一物件進行註冊set和get方法操作 let definereactive obj,key,valu...