最近看实现一个vue,然后看到了vue的源码部分,这个Dep属实给我整懵了,如果数据绑定、模板解析的难度算1颗星,这个Dep掺和进去以后就是100颗星。

怎么说呢,按顺序理一遍,首先,创建Vue实例,observer订阅vm.$data,递归的订阅data中的每一个变量,用defineProperity,然后就到了这个get了。

关键是看什么时候把watcher添加到dep.subs[]里的,有的文章说是在订阅时触发get的时候创建的watcher,简直就是胡扯。

大概顺序是这么个回事,编译html模板时,发现需要特殊处理的变量,比如v-model=“name”,这个name被发现以后,就准备为其创建watcher,在创建watcher的时候,先把这个watcher挂载到Dep.target这个全局静态变量上,然后触发一次get事件,这样就触发了get函数中的Dep.target && dep.addSub(Dep.target);,等get到了变量以后,也已经添加到subs队列里了,这时候在令Dep.target = null。

这一来一回真的就把人整晕了。

而且,在变量改变,触发set函数时,要调用watcher.update()函数,这里也要触发一次get函数。因此可能会重复往subs队列添加watcher,因此还要设置一个可以自增的depid来进行唯一性控制。这也太抽象了,我人晕了。

更详细的解释我又写了一篇文章:【困难版】如何实现一个类vue的双向绑定——Vue2.0 | MVVM | 数据劫持+发布订阅

Logo

前往低代码交流专区

更多推荐