vue使用proxy和defineProperty 监听数据的区别

vue3 为什么用proxy代替defineProperty

• defineProperty：对对象的属性做循环再监听，对数组需要重写数组方法才能监听到。
• proxy：直接对整个对象监听，不需要循环整个对象，对新增和删除属性也能监听。对数组不需要再写方法，大大提高了性能。缺点就是不兼容低版浏览器。

从监听数据的角度

• defineProperty 只能监听某个属性而不是整个对象
• proxy 直接监听整个对象，对新增和删除属性也能监听
• defineProperty 需要知道是哪个对象的哪个属性，proxy只需要知道是哪个对象就行了，省去了循环提高了效率
• defineProperty 对新增和删除属性都不能监听到，需要vue外加api才能实现

监听对原对象的影响

• defineProperty是通过修改属性增加描述符的方式实现监听的，一定会修改原数据的
• proxy 会返回一个代理对象，不会修改原对象的

对数组的监听

• 因为数组的length的特殊（描述符无法修改），所以defineProperty无法监听数组长度变化。
• vue只能重写数组方法，实现监听。但是解决不了，修改下标不能监听的问题，只能使用$set方法。
• proxy 监听的是代理对象，所以所有的操作都会被捕获，包括数组的方法和length。不需要重写数组方法和$set。

监听的范围

• defineProperty只能监听value的set和get
• proxy 除了[[getOwnPropertyNames]],可以监听所有js操作