雙向數(shù)據(jù)綁定原理

• 1.首先會在一個函數(shù)內(nèi)通過typeof去判斷傳進(jìn)來的是不是一個對象，如果不是的話先通過object.keys轉(zhuǎn)一下然后去遍歷，拿到key
• 2.然后在定義一個處理函數(shù)，傳三個值，一個攔截的目標(biāo)對象，一個key，一個value（原值，因為獲取的時候要返回原值，就是在get中），通過object.defineProperty,他也接收三個參數(shù)，一個目標(biāo)對象，一個key，一個對象，對象中有set和get兩個函數(shù)，get是獲取，set是設(shè)置，set接收一個傳過來的新值，就是修改后的值，然后去判斷新的值和原來的值是不是相等，如果不相等，把新值去賦值給原值，get函數(shù)的haul，就是直接return原值就可以了，因為他是一個獲取嘛。
• 3. 然后在第一個定義的函數(shù)中，在遍歷中取調(diào)用一下。
• 4.當(dāng)用更深層次的對象的時候，就是說對象里面還有對象，那么我們就在處理函數(shù)中把第一個函數(shù)調(diào)用一次，然后把value值傳進(jìn)去，這樣進(jìn)行一個遞歸的調(diào)用。

vue (defineProperty)實現(xiàn)攔截

• 進(jìn)行數(shù)據(jù)劫持
• ++Object.defineProperty++ 攔截

<script>
    function observer (data) {
    //判斷如果沒有傳值，或者傳的值不是一個對象，就直接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
            }
        }
    }
    //這樣就會對obj進(jìn)行一個劫持，一旦改變obj內(nèi)的屬性，就返回相對應(yīng)的數(shù)據(jù)，比如對obj的name進(jìn)行了改變，observer()函數(shù)可能會返回一句obj的name已經(jīng)改變?yōu)?..
    //observer (obj)
    let obj = {
        id:1,
        name:zhngsan,
        age: 20
    }
</script>