我們都知道vue對data的監(jiān)聽是通過Object.defineProperty去挾持它的getter、setter方法去實(shí)現(xiàn)當(dāng)某個(gè)值發(fā)生了改變，觸發(fā)它的setter副作用的。

舉個(gè)例子

// 假如我們需要對data的age屬性進(jìn)行監(jiān)聽
let obj = {}
let value = 1
Object.defineProperty(obj, 'age', {
  get(){
    console.log('age的屬性被讀取了')
    return value
  },
  set(newVal) {
    console.log('age的值被set了', newVal)
    val = newVal
  }
})

當(dāng)我們想在data的某一個(gè)值發(fā)生改變的時(shí)候去做一些事情的時(shí)候，我們就可以用這種方式去“截胡”

但是問題來了，一個(gè)vue組件中通常會有很多很多個(gè)data，那我們應(yīng)該怎么去監(jiān)控它的每一個(gè)屬性呢？

emmmm，該不可能把for (let key in obj) 給一個(gè)一個(gè)掛上set監(jiān)聽吧，不會吧！

雖然的確是這樣的，但是顯然不會這樣去寫，ok。 let's do it。

export class Observe {
    constructor(value) {
        this.value = value
        this.walk(value)
    }
    walk() {
        const keys = Object.keys
        for(let i = 0; i < keys.length; i++) {
            defineReactive(value, keys[i], )
        }
    }
}

// 讓對象的每一個(gè)屬性都變成可觀測的
function defineReactive(obj, key, value) {
    if(arguments.length === 2) {
        value = obj[key]
    }
    if(typeof value === 'object') {
        defineReactive(value)
    }
    Object.assign(obj, key, {
        get() {
            console.log(`對象的${obj[key]}被讀取了`)
            return value
        },
        set(newVal) {
            console.log(`對象的${obj[key]}被重新賦值了， 新值為${newVal}`)
            obj[key] = newVal
        }
    })
}

這樣就可以實(shí)現(xiàn)監(jiān)控對象中的每個(gè)屬性了