多次修改只做一次更新的设计
每次修改数据,都会触发数据的依赖更新。那么,按道理来说,修改3次,就应该调用3遍更新函数,但是实际上只会调用一遍。
数据变化监听
数据监听,如果数据有变化,则会进set方法,然后执行dep.notify
依赖更新
- 如果事件回调中有修改data里面的属性的,则相应的依赖会更新,会执行watcher.update;
- 将watcher放到一个队列,如果是修改的同一个属性,那么就是同一个watcher,queue中只会放同一个watcher,通过has[id]来判断的;
Vue nextTick的源码解析
总体执行步骤:
- 将注册的回调函数放到callbacks队列里面;
- 通过pending判断是不是已经执行过;
- watcher.run()就是执行依赖更新;
- Watcher.prototype.update 里面调用的是nextTick;
- 手动调用vue.$nextTick是像callbacks中新增一条队列,callbacks遍历,每个注册事件执行完以后,包括water.update patchNode都执行完以后再执行第二个nextTick回调。所以nextTick实现的是异步更新,nexttick中可以取到dom节点更新后的内容;
nextTick
- cb回调函数会经统一处理压入callbacks数组
- 执行异步延迟函数,并设置标志位进行判断
- 当 nextTick 没有传入函数参数的时候,返回一个 Promise 化的调用
flushCallbacks
flushCallbacks是用来执行callbacks中的回调函数的
- 复制一遍 callbacks
- 把原来 callbacks 清空
- 遍历复制的 callbacks ,然后逐个执行
vue系列课程
最近会陆续的对vue进行源码分析,一系列课程如下: