vue源码解析之NextTick原理

1,105 阅读2分钟

多次修改只做一次更新的设计

每次修改数据,都会触发数据的依赖更新。那么,按道理来说,修改3次,就应该调用3遍更新函数,但是实际上只会调用一遍。

数据变化监听

数据监听,如果数据有变化,则会进set方法,然后执行dep.notify

依赖更新

  1. 如果事件回调中有修改data里面的属性的,则相应的依赖会更新,会执行watcher.update;
  2. 将watcher放到一个队列,如果是修改的同一个属性,那么就是同一个watcher,queue中只会放同一个watcher,通过has[id]来判断的;

Vue nextTick的源码解析

总体执行步骤:

  1. 将注册的回调函数放到callbacks队列里面;
  2. 通过pending判断是不是已经执行过;
  3. watcher.run()就是执行依赖更新;
  4. Watcher.prototype.update 里面调用的是nextTick;
  5. 手动调用vue.$nextTick是像callbacks中新增一条队列,callbacks遍历,每个注册事件执行完以后,包括water.update patchNode都执行完以后再执行第二个nextTick回调。所以nextTick实现的是异步更新,nexttick中可以取到dom节点更新后的内容;

nextTick

  1. cb回调函数会经统一处理压入callbacks数组
  2. 执行异步延迟函数,并设置标志位进行判断
  3. 当 nextTick 没有传入函数参数的时候,返回一个 Promise 化的调用

flushCallbacks

flushCallbacks是用来执行callbacks中的回调函数的

  1. 复制一遍 callbacks
  2. 把原来 callbacks 清空
  3. 遍历复制的 callbacks ,然后逐个执行

vue系列课程

最近会陆续的对vue进行源码分析,一系列课程如下:

state系列

  1. props原理
  2. methods原理
  3. data原理
  4. computed原理
  5. watch原理

lifecycle系列

  1. 生命周期原理

event系列

  1. event原理

render系列

  1. render原理

inject/provide系列

  1. inject/provide原理

plugins系列

  1. vue-router原理
  2. Vue Router 那些事
  3. Vuex你应该知道的事
  4. vue源码解析之vuex原理
  5. Vue自定义插件

组件系列

  1. keep-alive原理
  2. Vue 单文件组件
  3. Vue组件间通信
  4. vue虚拟列表

指令系列

  1. Vue自定义指令
  2. vue源码解析之Directives原理

算法系列

  1. diff原理
  2. Vue编译器源码分析

异步任务

  1. vue源码解析之NextTick原理

其他

  1. vue单元测试
  2. Vue轮播组件
  3. 你不知道的vue那些事
  4. vue技巧大解密