JS 监听对象的操作方式(一) 监听对象的属性被设置或获取的过程Object.defineProperty()

const obj = {
  name: '张三丰',
  age: 18,
  hobby: '打太极'
}
Object.keys(obj).forEach(key => {
  let value = obj[key]
  Object.defineProperty(obj, key, {
    get: function() {
      console.log(`监听到获取${key}的值`);
      # 注意：如果不return值出去，默认是return undefined
      return value
     },
    set: function(newValue) {
      console.log(`监听到给${key}设置值`);
      # 如果设置新的值，必须要接受新值，然后重新赋值。
      value = newValue
    }
  })
})
obj.name = '么么哒'
obj.age = 30
obj.hobby = '玩游戏'
console.log(obj.name)
console.log(obj.age)
console.log(obj.hobby)
# Object.defineProperty()的缺点：对对象的新增属性、删除属性是监听不到的。
# 这是为什么Vue2初始化未定义的属性，后续新增的要用$set处理。