上节说到了vue中的数据响应的方式,这篇说下这两个的具体理解和区别。

首先vue3中已经放弃了defineProperty,使用了proxy来代替,那么肯定是defineProperty有不足之处。那么先说下defineProperty的不足之处在哪里?

首先:Object.defineProperty 有一个缺陷是无法监听数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应。一旦我们修改了数组小标去改变数组,那么就会发现一些问题。其次:defineProperty只能劫持对象的属性,那么一旦对象的属性很多,或者说劫持的属性下面还有属性需要我们劫持,那么就会有性能的问题。那么再说下proxy。

Object.defineProperty只能劫持对象的属性,对新增属性需要手动进行 Observe,而 Proxy 是直接代理对象,Proxy可以直接监听数组的变化,它不仅可以对数组实现拦截,还能对 MapSet 实现拦截;另外 Proxy 的拦截也是懒处理行为,如果用户没有访问嵌套对象,那么也不会实施拦截,这就让初始化的速度和内存占用改善了。但是proxy也有一个问题,就是不支持IE。

以上就是总结的几个点,如果不全面或者有错误,欢迎指出。