最近面试有被问道对nextTick的理解,今天就来简单写写对他的理解
Vue.nextTick原理
Vue中的数据变化到DOM是异步过程,一旦观察到数据变化,Vue就会开起一个任务队列,把同一事件循环中观察到数据变化的watcher推送到这个队列。
如果这个watcher被触发多次,只需推送一次,这种行为有效的过滤重复数据造成的计算和DOM操作,当下一个事件循环时,Vue会清空队列,并进行DOM更新。
nextTick就是为了在数据变化之后等待DOM的更新完成,可以在数据变化之后立即使用Vue.nextTick,因为js时单线程的,拥有事件循环机制,nextTick实现的原理就是利用事件循环的宏任务和微任务。
宏任务:在一次新的事件循环的过程中,遇到宏任务时,宏任务将被加入任务队列,但需要等到下一次事件循环才会执行。常见的宏任务有script、setTimeout、setInterval
、setImmediate等
微任务:当前事件循环的任务队列为空时,微任务队列中的任务就会被依次执行。在执行过程中,如果遇到微任务,微任务被加入到当前事件循环的微任务队列中。简单来说,只要有微任务就会继续执行,而不是放到下一个事件循环才执行。常见的微任务有promise.then、MuationObserver等
详细可以查看Vue.nextTick源码,目录: src/core/util/next-tick.js