《Vuejs设计与实现》5.8.4 处理forEach

84 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第22天,点击查看活动详情

Map中也是有forEach,它的基本语法如下,只是与数组的callback不同,它的入参第一个是值,第二个是键名,第三个则返回当前这个map,它还有第二个参数,可以改变this的指向,这个我们用到的时候在看

Map.forEach(callbackFn:(value,key,thisMap)=>{},?thisArg)

forEach会遍历map中的所有键值对,因此它只与键值对的数量有关系,当我们改变键值对的数量的时候,都应该重新遍历一次,比如常见的add,delete方法。 因此,我们实现起来就很简单了,就仿照之前那样写就行了

image.png

这段代码理论上是没什么问题的,但当你实际运行的时候,你会发现,你的值不再是响应的。与原因与之前一样,我们在forEach的时候,用的是this.raw,是原始值。 书中给出的解决办法是:改变callback中的this指向,同时递归键值对,将其响应化。

image.png

其实到这,我们基本上可以说完成forEach的处理,但是这里依旧有点问题。

我们知道,无论是for ... in 还是forEach,它的响应都是基于ITERATE_KEY与副作用函数之间。但是不同的时候,forEach的callback中还会有值,因此当值法神变化的是,我们仍旧需要执行副作用函数。

所以我们需要修改一下trigger,只需要判断一下数据的类型,如果是map的时候的,我们在执行一下副作用函数就行了。这一块就留给读者自由发挥吧,改起来很简答。

PS: 由于现在一直是在征文活动中,我也抽不出来空去整理代码,等这个月征文活动结束了,我再把代码整理一下。

其实这也是这本书的一个问题,代码太凌乱了,如果每一次都写全部代码,那毫无以为会被认为水文,但是只写本章修改的代码,就变成git记录,人脑又装不了git.

这块我会建个仓库,然后按文章记录代码,同时记录一份完整代码,可以参照着看