Skip to content

Object.defineProperty和Proxy的区别

相同点:都是用来实现响应式数据绑定的,实现的功能类似,但API却有着本质的区别。

不同点

  1. 监听数据的角度
    1. defineProperty 只能监听某个属性而不能监听整个对象
    2. proxy 不用设置具体属性,直接监听整个对象。
    3. defineProperty 监听需要知道是哪个对象的哪一个数据,而 proxy 只需要知道是哪个对象就可以了
  2. 监听对原对象的影响
    1. defineProperty 是通过在原对象身上新增或修改属性增加描述符的方式实现的监听效果,一定会修改原数据
    2. proxy 只是原对象的代理proxy 会返回一个代理对象不会原对象上进行改动,对原数据是无污染的。
  3. 实现对数组的监听(因为length的特殊性)
    1. defineProperty 无法监听数组长度变化,Vue2只是通过重写数组方法的方式变相的达成监听的效果。(重写数组的方法不能解决数组下标时监听的问题,只能使用自定义$set
    2. proxy 因为自身特性,是创建新的代理对象而不是对原数据身上的监听属性。
  4. 监听的范围
    1. defineProperty 只能监听到 valuegetset 变化。
    2. proxy 可以监听 [[getOwnPropertyNames]] (对象中所有自有属性)以外所有JS的对象操作。