vue的$nextTick的原理

参考:https://cloud.tencent.com/developer/article/1633546

总结一下:就是$nextTick将回调函数放到微任务或者宏任务当中以延迟它地执行顺序;(总结的也比较懒)
重要的是理解源码中它的三个参数的意思:

  • callback:我们要执行的操作,可以放在这个函数当中,我们没执行一次$nextTick就会把回调函数放到一个异步队列当中;
  • pending:标识,用以判断在某个事件循环中是否为第一次加入,第一次加入的时候才触发异步执行的队列挂载
  • timerFunc:用来触发执行回调函数,也就是Promise.then或MutationObserver或setImmediate 或setTimeout的过程(Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替。)

理解之后,在看整个 n e x t T i c k 里面的执行过程,其实就是把一个个 nextTick里面的执行过程,其实就是把一个个 nextTick里面的执行过程,其实就是把一个个nextTick中的回调函数压入到callback队列当中,然后根据事件的性质等待执行,轮到它执行的时候,就执行一下,然后去掉callback队列中相应的事件。

你可能感兴趣的:(vue.js,nextTick)