看vue双向数据绑定发现的小问题

里面有一个关键方法

class Observer {
    constructor(data) {
        this.walk(data)
    }
    walk(data) {
        // 遍历对象的每一项, 添加响应式方法
        Object.keys(data).forEach(key => defineReactive(data, key, data[key]))
    }
}
function defineReactive(target, key, value) {
   // 如果值是对象的话, 也需要重复添加
  observe(value)
  Object.defineProperty(target, key, {
    get() {
      return value
    },
    set(newValue) {
      value = newValue
        // 对设置的新值也需要observe
      observe(newValue)
    }
  })
}

后面看的时候没有注意到,在Object.defineProperty的set方法中,为什么给value=newValue赋值之后,就可以更新data[key]的值,这里为什么不是data[key]=newValue

后来一想也简单

通过Object.defineProperty定义了get和set之后, data[key]的值就发生了改变,console.log()的时候,实际取的是get方法的return值,这里reuturn的值是value, 在赋值的时候也是直接给value赋值, 后面再取值的时候,也是取value的值, 就与data[key]的实际值无关了

实际相当于:再外面定义了一个变量a, 取值的时候取a的值, 赋值的时候改变a的值, 整块也是一个闭包.