vue2源码-二、对象响应式原理

// 循环对象进行一次劫持
class Observer{
constructor(value){
this.walk()
}
walk(data) {
// 重新定义属性
Object.keys(data).forEach((key) => defineReactive(data, key, data[key]))
}
}
// 属性劫持
// 对对象target，定义属性key，值为value
// 使用Object.definProperty重新定义data的属性
export function defineReactive(target, key, value) {
observe(value) // 递归对所有的属性进行劫持
Object.defineProperty(target, key, {
// 用户取值
get() {
console.log('用户设置值00')
return value
},
// 用户设置值了
set(newValue) {
console.log('用户取值了')
if (newValue === value) return
// 递归，设置了对象
observe(newValue)
value = newValue
},
})
}