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

2020-06-12 20:45:47易采站长站整理
getter
setter
方法。

1. 通过下标获取某个元素和修改某个元素的值

可以看到,通过下标获取某个元素会触发

getter
方法, 设置某个值会触发
setter

方法。

接下来,我们再试一下数组的一些操作方法,看看是否会触发。

2. 数组的 push 方法

push
并未触发
setter
getter
方法,数组的下标可以看做是对象中的
key
,这里
push
之后相当于增加了下索引为3的元素,但是并未对新的下标进行
observe
,所以不会触发。

3. 数组的 unshift 方法

我擦,发生了什么?

unshift
操作会导致原来索引为0,1,2,3的值发生变化,这就需要将原来索引为0,1,2,3的值取出来,然后重新赋值,所以取值的过程触发了
getter
,赋值时触发了
setter

下面我们尝试通过索引获取一下对应的元素:

只有索引为0,1,2的属性才会触发

getter

这里我们可以对比对象来看,arr数组初始值为[1, 2, 3],即只对索引为0,1,2执行了

observe
方法,所以无论后来数组的长度发生怎样的变化,依然只有索引为0,1,2的元素发生变化才会触发,其他的新增索引,就相当于对象中新增的属性,需要再手动
observe
才可以。

4. 数组的 pop 方法

当移除的元素为引用为2的元素时,会触发

getter