vue2.x中如何监测数组和对象变化?Proxy比Object.defineProperty好在哪?

vue2.x中如何监测数组和对象变化?

• Object通过Object.defineProperty结合递归就能实现

  • 比较麻烦就对了,Proxy就直接代理整个对象

• Array的话 Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。

• 数组某些情况下会不刷新视图,我们这样解决

  • 当利用索引直接设置一个数组项时，例如vm.items[indexOfItem] = newValue

  //使用该方法进行更新视图
  // vm.$set，Vue.set的一个别名
  vm.$set(vm.items, indexOfItem, newValue)
  复制代码

  • 当修改数组的长度时，例如vm.items.length = newLength

  //使用该方法进行更新视图
  // Array.prototype.splice
  vm.items.splice(indexOfItem, 1, newValue)

Proxy比Object.defineProperty好在哪?

「Vue3.x改用Proxy替代Object.defineProperty」

• Object.defineProperty 只能劫持对象属性的getter和setter方法

  • Proxy 是直接代理劫持整个对象

• Object.definedProperty 不支持数组(可以监听数组,不过数组方法无法监听自己重写)，更准确的说是不支持数组的各种API(所以VUE重写了数组方法

  • Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。

• Proxy 会返回一个代理对象，我们只需要操作新对象即可，而 Object.defineProperty 只能遍历对象属性直接修改

• Object.definedProperty唯一比Proxy好的一点就是兼容性,不过相信Proxy新标准将受到浏览器厂商重点持续的性能优化