写在前面,笔记来源于www.bilibili.com/video/BV1iX… 侵删!
注意,基于前面的笔记的逻辑,只要数组的数组项拥有__ob__属性,就可以说是响应式的,是可以被侦测到的
为啥要进行数组的响应式处理,因为之前的代码是只能进行对象的属性响应式处理的,如图:
在这个基础上再添加一个属性g:
此时尝试去操作这个属性g:
此时你会发现无法形成响应式。我的预期效果是:"你视图改变g属性",但显然并没有达成
就是说数组发生改变,我应该知道它被改变了
上图是预期的"响应式"效果。"你视图改变m属性"并且返回你要改变的新的值
那么
这个也是面试经常会遇到的问题:数组是如何形成响应式的?
vue中改写了以下七个属性:
push
pop
shift
unshift
splice
sort
reverse
注意这七个方法是定义在Array.prototype上的 所以要改写这七个方法需要去备份原来的方法,在新的函数中调用原来的方法并且做一些新的需求就可以了
原来的方法是在Array.prototype上的,而我们将所有的方法都在arrayMethods上重新写一次
更改默认指向原型
如果面试官问你:
vue中数组的变化侦测(响应式)是如何实现的?
答:实际上是以Array.prototype为原型,创建了一个arrayMethods的对象,使用非常强硬的手段(Object.setPrototypeOf()来让数组强行调用新定义的函数。
push
pop
shift
unshift
splice
sort
reverse
在写的过程中有一个值得注意的遇到的问题记录一下:
在这里一直报错,如下:
在这里需要注意,slice()是数组的方法,但是,arguments不是数组,是一个类数组对象,所以接下来的问题是
如何将类数组对象更改为数组
就很简单:const args = [...arguments]
对类数组对象进行解构
注意
必须调用七个方法中的一个,才能够触发数组的响应式。vue中只改写了这七个方法!
2生效1不生效