Object.defineProperty 监听不到数组下标和长度的变化。而且监测不到对象的属性添加或删除

Vue3 使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能。相对于Object.defineProperty()来说，Proxy 可以监听数组的变化。而且Proxy 直接代理整个对象而非对象属性，这样只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性。
 

let obj = {name: 'Eason',age: 30}

let handler = {

  get (target, key, receiver) {

    console.log('get', key)

    return Reflect.get(target, key, receiver)

  },

  set (target, key, value, receiver) {

    console.log('set', key, value)

    return Reflect.set(target, key, value, receiver)

  }

}

let proxy = new Proxy(obj, handler)

proxy.name = 'Zoe' // set name Zoe

proxy.age = 18 // set age 18