雙向數(shù)據(jù)綁定原理
- 1.首先會(huì)在一個(gè)函數(shù)內(nèi)通過(guò)typeof去判斷傳進(jìn)來(lái)的是不是一個(gè)對(duì)象，如果不是的話先通過(guò)object.keys轉(zhuǎn)一下然后去遍歷乞而，拿到key
- 2.然后在定義一個(gè)處理函數(shù)哈踱，傳三個(gè)值荒适，一個(gè)攔截的目標(biāo)對(duì)象，一個(gè)key开镣，一個(gè)value（原值刀诬，因?yàn)楂@取的時(shí)候要返回原值，就是在get中）邪财，通過(guò)object.defineProperty,他也接收三個(gè)參數(shù)陕壹，一個(gè)目標(biāo)對(duì)象，一個(gè)key树埠，一個(gè)對(duì)象糠馆，對(duì)象中有set和get兩個(gè)函數(shù)，get是獲取怎憋，set是設(shè)置榨惠，set接收一個(gè)傳過(guò)來(lái)的新值，就是修改后的值，然后去判斷新的值和原來(lái)的值是不是相等赠橙，如果不相等耽装，把新值去賦值給原值，get函數(shù)的haul期揪，就是直接return原值就可以了掉奄，因?yàn)樗且粋€(gè)獲取嘛。
- 然后在第一個(gè)定義的函數(shù)中凤薛，在遍歷中取調(diào)用一下姓建。
- 4.當(dāng)用更深層次的對(duì)象的時(shí)候，就是說(shuō)對(duì)象里面還有對(duì)象缤苫，那么我們就在處理函數(shù)中把第一個(gè)函數(shù)調(diào)用一次速兔，然后把value值傳進(jìn)去，這樣進(jìn)行一個(gè)遞歸的調(diào)用活玲。
vue (defineProperty)實(shí)現(xiàn)攔截
- 進(jìn)行數(shù)據(jù)劫持
-
++Object.defineProperty++ 攔截
<script>
function observer (data) {
//判斷如果沒(méi)有傳值涣狗，或者傳的值不是一個(gè)對(duì)象，就直接return
if(!data || typeof data !== 'object') {
return;
}
Object.keys(data).forEach(item => {
observerProperty (data, item, data[item])
})
}
function observerProperty (target, key, value) {
observer (value)
Object.defineProperty(target, key, {
get () {
return value;
}
set (val) {
value = val
}
}
}
//這樣就會(huì)對(duì)obj進(jìn)行一個(gè)劫持舒憾，一旦改變obj內(nèi)的屬性镀钓，就返回相對(duì)應(yīng)的數(shù)據(jù)，比如對(duì)obj的name進(jìn)行了改變镀迂，observer()函數(shù)可能會(huì)返回一句obj的name已經(jīng)改變?yōu)?..
//observer (obj)
let obj = {
id:1,
name:zhngsan,
age: 20
}
</script>
