Vue 3.0 里为什么要用 Proxy API 替代 defineProperty API?

737 阅读2分钟

Vue 3.0 里为什么要用 Proxy API 替代 defineProperty API?

一:defineProperty API的弊端

1) vue2是通过Object.defineproperty中的getter和setter函数进行数据劫持完成数据响应的

2)无法直接监听属性的新增和删除

3)无法直接监听数组(尽管通过hack重写了数组,但也仅能完成7个数组的监听) 二:Proxy的优势 1)作为vue3中替代defineProperty 的新API,相当于给一个对象的外层加了一层拦截,这层拦截可以做很多操作,比如对数据信息的【过滤】【修改】或者【收集数据信息】

2)因为是在整个对象外层进行了拦截,所以,可以操作对象中的属性同时监听属性的【新增】和【删除】

3)Proxy可以监听数组的变化

三:Proxy使用场景 1)数据响应:在实际数据读取和设置前进行拦截,在拦截trap中完成对数据的依赖收集以及触发视图更新操作

2)实现数组的负数索引访问

3)获取属性对应的值,在该值无返回值或为undefined的情况下

四:Proxy的劣势 1)兼容性差,在vue3中的新API有一定的劣势,那么重点就是对浏览器不能完全兼容,对部分浏览器的低版本是不兼容的,对qq浏览器,IE浏览器,百度浏览器是完全不兼容的

2)性能问题,Proxy的性能要比promise的性能还要差

五:注意: 在使用Proxy的时候,需要根据它的性能和实用性权衡之后,在进行使用