我们都知道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
}
})
}
这样就可以实现监控对象中的每个属性了
