Vuejs的$nextTick原理

时间:2022-12-22 14:44:47

本质:

  nextTick,本质上是一个异步API,表示当前同步流程执行完成后再调用传入的函数。

  根据环境不同,异步API的实现可以分别通过: setTimeout(0), new Promise(), MutationObserver等

流程说明:

  1. 数据发生变动后,在Watcher的内部,把sub推送到队列中,而不是立刻执行(优化后实现一批多次改动,dom只最终一次响应);
  2. 标志位为False的时候,表示本轮异步API还没调用,调用来; 否则,跳过
  3. 同步代码执行完,所有回调入队列; 异步API开始执行,对任务进行优化(排序、去重)后,开始一个个地执行

  如下图:

Vuejs的$nextTick原理

    

  

参考:https://chuckliu.me/#!/posts/58bd08a2b5187d2fb51c04f9