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