博文阅读-监听数据变化.md

绑定数据怎么监听数据变化

definePropety & proxy

definePropety

• 语法

  Object.defineProperty(obj, prop, descriptor)

var obj = {}
Object.defineProperty(obj, 'num', {
  value: 1,
  writable: true,
  enumerable: true,
  configurable: true
})

//  对象 obj 拥有属性 num，值为 1

• 参数

  descriptor: 将被定义或修改的属性的描述符。

• 参数:第三个参数 descriptor 所表示的属性描述符有两种形式：数据描述符和存取描述符
  • configurable
  • enumerable
  • value
  • writable
  • get
  • set
• 注意:属性描述符必须是数据描述符或者存取描述符两种形式之一，不能同时是两者。

// 可以
Object.defineProperty({}, 'num', {
  value: 1,
  writable: true,
  enumerable: true,
  configurable: true
})

// 也可以：
var value = 1
Object.defineProperty({}, 'num', {
  get: function() {
    return value
  },
  set: function(newValue) {
    value = newValue
  },
  enumerable: true,
  configurable: true
})

// 但是不可以：
// 报错
Object.defineProperty({}, 'num', {
  value: 1,
  get: function() {
    return 1
  }
})

proxy

• 语法

  var proxy = new Proxy(target, handler); proxy 对象的所有用法，都是上面这种形式，不同的只是 handler 参数的写法。其中，new Proxy()表示生成一个 Proxy 实例，target 参数表示所要拦截的目标对象，handler 参数也是一个对象，用来定制拦截行为。

var proxy = new Proxy(
  {},
  {
    get: function(obj, prop) {
      console.log('设置 get 操作')
      return obj[prop]
    },
    set: function(obj, prop, value) {
      console.log('设置 set 操作')
      obj[prop] = value
    }
  }
)

proxy.time = 35 // 设置 set 操作

console.log(proxy.time) // 设置 get 操作 // 35