为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

2020-06-12 20:45:47易采站长站整理

删除了索引为2的元素后,再去修改或获取它的值时,不会再触发

setter
getter

这和对象的处理是同样的,数组的索引被删除后,就相当于对象的属性被删除一样,不会再去触发

observe

到这里,我们可以简单的总结一下结论。

Object.defineProperty
在数组中的表现和在对象中的表现是一致的,数组的索引就可以看做是对象中的
key

通过索引访问或设置对应元素的值时,可以触发

getter
setter
方法
通过
push
unshift
会增加索引,对于新增加的属性,需要再手动初始化才能被
observe

通过
pop
shift
删除元素,会删除并更新索引,也会触发
setter
getter
方法。

所以,

Object.defineProperty
是有监控数组下标变化的能力的,只是vue2.x放弃了这个特性。

二、vue对数组的observe做了哪些处理?

vue的

Observer
类定义在
core/observer/index.js
中。

可以看到,vue的

Observer
对数组做了单独的处理。

hasProto
是判断数组的实例是否有
__proto__
属性,如果有
__proto__
属性就会执行
protoAugment
方法,将
arrayMethods
重写到原型上。
hasProto
定义如下。

arrayMethods
是对数组的方法进行重写,定义在
core/observer/array.js
中, 下面是这部分源码的分析。