数据响应原理--4.数组的响应式处理

148 阅读2分钟

写在前面,笔记来源于www.bilibili.com/video/BV1iX… 侵删!

注意,基于前面的笔记的逻辑,只要数组的数组项拥有__ob__属性,就可以说是响应式的,是可以被侦测到的
为啥要进行数组的响应式处理,因为之前的代码是只能进行对象的属性响应式处理的,如图:

image.png 在这个基础上再添加一个属性g:

image.png

此时尝试去操作这个属性g:

image.png

image.png

此时你会发现无法形成响应式。我的预期效果是:"你视图改变g属性",但显然并没有达成
就是说数组发生改变,我应该知道它被改变了

image.png 上图是预期的"响应式"效果。"你视图改变m属性"并且返回你要改变的新的值

那么

这个也是面试经常会遇到的问题:数组是如何形成响应式的?

vue中改写了以下七个属性:

push
pop
shift
unshift
splice
sort
reverse

注意这七个方法是定义在Array.prototype上的 所以要改写这七个方法需要去备份原来的方法,在新的函数中调用原来的方法并且做一些新的需求就可以了

image.png 原来的方法是在Array.prototype上的,而我们将所有的方法都在arrayMethods上重新写一次

image.png 更改默认指向原型

如果面试官问你:

vue中数组的变化侦测(响应式)是如何实现的?
答:实际上是以Array.prototype为原型,创建了一个arrayMethods的对象,使用非常强硬的手段(Object.setPrototypeOf()来让数组强行调用新定义的函数。

push

pop

shift

unshift

splice

sort

reverse

在写的过程中有一个值得注意的遇到的问题记录一下:

image.png 在这里一直报错,如下:

image.png 在这里需要注意,slice()是数组的方法,但是,arguments不是数组,是一个类数组对象,所以接下来的问题是 如何将类数组对象更改为数组

就很简单:const args = [...arguments]
对类数组对象进行解构

注意
必须调用七个方法中的一个,才能够触发数组的响应式。vue中只改写了这七个方法!

image.png 2生效1不生效