Proxy 与 Object.defineProperty

Proxy对象 与 Object.defineProperty()常用来做数据劫持

数据劫持 在访问或修改对象的某个属性时，通过代码拦截这一行为，并进行额外的数据处理然后返回此结果

一、Object.defineProperty

监听属性

缺点：

• 不能监听数组的变化
  Vue将原来数组方法定义为变异方法，（push、pop、shift、unshift、splice、sort、reverce）
  非变异方法：fliter、concat、slice，返回一个新数组，不会修改原始数组

• 必须遍历对象的每个属性
  Object.defineProperty() 使用要配合Object.keys() 和遍历

Object.keys(obj)返回obj可枚举属性组成的字符串数组

Object.keys(obj).forEach(key => {
  Object.defineProperty(obj, key, {
    // ...
  })
})

• 必须深层遍历嵌套的对象
  当一个对象为深层嵌套的时候,必须进行逐层遍历，直到把每个对象的每个属性都调用 Object.defineProperty() 为止

二、Proxy

let p = new proxy(target,handler)

target:proxy包装的目标对象
handler:当执行一个操作时定义代理的行为函数

优势：

• Proxy直接监听整个对象

Reflect内置对象

Reflect.get():获取对象身上某个属性的值，类似于 target[name]。
Reflect.set():将值分配给属性的函数,返回一个Boolean，如果更新成功，则返回true。

• Proxy可以直接监听数组的变化
• 嵌套支持：get里面递归调用proxy并返回

Object.defineProperty与Proxy理解整理