我们都知道vue对data的监听是通过Object.defineProperty去挟持它的getter、setter方法去实现当某个值发生了改变，触发它的setter副作用的。

举个例子

// 假如我们需要对data的age属性进行监听
let obj = {}
let value = 1
Object.defineProperty(obj, 'age', {
  get(){
    console.log('age的属性被读取了')
    return value
  },
  set(newVal) {
    console.log('age的值被set了', newVal)
    val = newVal
  }
})

当我们想在data的某一个值发生改变的时候去做一些事情的时候，我们就可以用这种方式去“截胡”

但是问题来了，一个vue组件中通常会有很多很多个data，那我们应该怎么去监控它的每一个属性呢？

emmmm，该不可能把for (let key in obj) 给一个一个挂上set监听吧，不会吧！

虽然的确是这样的，但是显然不会这样去写，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], )
        }
    }
}

// 让对象的每一个属性都变成可观测的
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
        }
    })
}

这样就可以实现监控对象中的每个属性了