nextTick实现
nextTick
作为 vue
的全局 api
之一,想必大家都非常熟悉。我们在上篇文章 深入Watcher 分析异步 watcher
的时候也是利用了 nextTick
来实现异步执行。今天我们就来分析分析 nextTick
的实现原理。
任务队列
如果想要更好的理解 nextTick
,需要补充下任务队列的知识储备,感兴趣的可以看看之前的文章 JS事件循环(Event Loop),这边就不过多分析了。
nextTick源码
nextTick
的实现源码在 src/core/tuil/next-tick.js
中,我们撸起袖子加油干,直接对其进行分析
// 辅助函数 import { noop } from 'shared/util' import { handleError } from './error' import { isIE, isIOS, isNative } from './env' // 是否使用微任务 export let isUsingMicroTask = false // 回调函数队列 const callbacks = [] // 回调函数队列的执行状态 let pending = false // 触发队列执行 function flushCallbacks () { // 改为执行状态 pending = false // 这边就是对回调队列进行遍历执行 // 注意这边会对回调函数进行浅复制 // 因为在回调函数也会往callbacks中添加新值 // 但是我们将它们归到下一个异步中执行 const copies = callbacks.slice(0) callbacks.length = 0 for (let i = 0; i < copies.length; i++) { copies[i]() } } // 这边的源码注释比较多不舍得删了 // 英文较差(如我)的可以借助翻译工具看看 // 大致就是解释了为什么nextTick异步实现选择微任务来实现以及改版历史 // 最先的时候是是否微任务来实现的但是后面发现了out-in transitions出现的bug // 后面改为宏任务(MessageChannel )与微任务结合的方式但是出现了更多的小问题 // 比较经典的就是我们知道有些事件需要用户手动点击触发 比如播放video // 但是将这个播放事件作为宏任务放到下个异步中可能就不再执行了 // 所以后面又改为全部优先使用微任务实现的方式 // 当然微任务由于触发优先级很高也会导致某些问题 比较典型的#6566 就是由于微任务的优先级比事件冒泡还高导致的 // Here we have async deferring wrappers using microtasks. // In 2.5 we used (macro) tasks (in combination with microtasks). // However, it has subtle problems when state is changed right before repaint // (e.g. #6813, out-in transitions). // Also, using (macro) tasks in event handler would cause some weird behaviors // that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109). // So we now use microtasks everywhere, again. // A major drawback of this tradeoff is that there are some scenarios // where microtasks have too high a priority and fire in between supposedly // sequential events (e.g. #4521, #6690, which have workarounds) // or even between bubbling of the same event (#6566). let timerFunc // 下面就是异步函数timerFunc的实现 // 注释也比较清楚了分析了使用不同实现的优劣 // The nextTick behavior leverages the microtask queue, which can be accessed // via either native Promise.then or MutationObserver. // MutationObserver has wider support, however it is seriously bugged in // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It // completely stops working after triggering a few times... so, if native // Promise is available, we will use it: /* istanbul ignore next, $flow-disable-line */ // 优先使用微任务promise.then if (typeof Promise !== 'undefined' && isNative(Promise)) { const p = Promise.resolve() timerFunc = () => { // 在then回调中调用flushCallbacks 实现了异步调用flushCallbacks 下面的其它调用也是如此 p.then(flushCallbacks) // 修复IOS的兼容性BUG // In problematic UIWebViews, Promise.then doesn't completely break, but // it can get stuck in a weird state where callbacks are pushed into the // microtask queue but the queue isn't being flushed, until the browser // needs to do some other work, e.g. handle a timer. Therefore we can // "force" the microtask queue to be flushed by adding an empty timer. if (isIOS) setTimeout(noop) } // 表明使用微任务 isUsingMicroTask = true } else if (!isIE && typeof MutationObserver !== 'undefined' && ( isNative(MutationObserver) || // PhantomJS and iOS 7.x MutationObserver.toString() === '[object MutationObserverConstructor]' )) { // 使用MutationObserver来实现异步微任务 // MutationObserver的使用这边就不分析了 // 大家可以看看MDN教程 https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/MutationObserver // Use MutationObserver where native Promise is not available, // e.g. PhantomJS, iOS7, Android 4.4 // (#6466 MutationObserver is unreliable in IE11) let counter = 1 const observer = new MutationObserver(flushCallbacks) const textNode = document.createTextNode(String(counter)) observer.observe(textNode, { characterData: true }) timerFunc = () => { counter = (counter + 1) % 2 textNode.data = String(counter) } isUsingMicroTask = true // 降级使用宏任务setImmediate } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { // Fallback to setImmediate. // Technically it leverages the (macro) task queue, // but it is still a better choice than setTimeout. timerFunc = () => { setImmediate(flushCallbacks) } // 最后没办法降级使用宏任务setTimeout } else { // Fallback to setTimeout. timerFunc = () => { setTimeout(flushCallbacks, 0) } } // 暴露的nextTick实现 export function nextTick (cb?: Function, ctx?: Object) { let _resolve // 其实调用nextTick就是往回调队列中添加回调cb // 在flushCallbacks中进行遍历执行 callbacks.push(() => { if (cb) { try { cb.call(ctx) } catch (e) { handleError(e, ctx, 'nextTick') } // 这边有个条件分支 // 如果没有cb参数则执行_resolve 而_resolve实际是Promise实例的resolve函数 // 所以我们可以在代码中调用nextTick().then()这样的写法 } else if (_resolve) { _resolve(ctx) } }) // 如果不是正在执行态则立即执行timerFunc // 调用timerFunc实现 timerFunc(微任务/宏任务) -> flushCallbacks -> cb.call(ctx) 的完整流程 if (!pending) { pending = true timerFunc() } // $flow-disable-line if (!cb && typeof Promise !== 'undefined') { return new Promise(resolve => { _resolve = resolve }) } } 复制代码
梳理
经过上面的源码分析,想必大家对 nextTick
的实现都理解的差不多了,下面我们将梳理下学习到的知识点
nextTick的实现原理
nextTick
的实现实际也是个 订阅发布模式
的实现。我们通过调用 nextTick
往任务队列 callBacks
添加回调函数,实现订阅。
同时调用 timerFunc
来开启一个异步任务。
当异步任务结束时调用函数 flushCallbacks
,在 flushCallbacks
中再遍历调用任务队列,实现通知。
异步执行的实现
nextTick
的异步任务根据不同的浏览器支持情况,采用一个降级的方式 Promise.resolive().then -> MutationObserver -> setImmediate -> setTimeout
,优先使用微任务 Promise.resolive().then
及 MutationObserver
nextTick方法的返回值
通过源码的阅读我们可以发现,nextTick(cb).then(() => {})
这样的调用方式是需要 cb
未定义才能这样调的。
// true nextTick().then(() => {}) // error nextTick(() => {}).then(() => {}) 复制代码
为什么需要使用nextTick
现在我们再来聊一聊为什么需要使用 nextTick
平常我们调用 nextTick
比较多的场景是当某个数据修改之后需要实时获取 DOM
,举个例子
this.showXXEl = true; this.$refs.XX; // undefined this.nextTick(() => { this.$refs.XX; // DOMElement }) 复制代码
为什么会出现这样的问题呢?我们继续梳理下
- 我们在渲染组件的时候会创建
渲染watcher
,其订阅了某些数据属性的dep
- 手动修改数据
this.showXXEl = true
触发dep
通知 watcher
接收到通知,通过queueWatcher
进行更新函数排队queueWatcher
中调用nextTick
进行异步等待- 开发者函数中的同步代码此时继续执行
this.$refs.XX
所有抛出undefined
- 开发者手动调用
nextTick(() => { this.$refs.XX })
进行异步等待 - 同步代码执行结束后,异步任务执行
- 开始执行
nextTick
中的回调队列,按照先进先出的队列顺序, - 执行
watcher
的更新函数updateComponent
完成渲染 - 执行开发者定义的异步回调
() => { this.$refs.XX }
,在上一步已经渲染的情况下,这边就能拿到this.$refs.XX
的DOM
了
小结
究其原因就是 watcher
的通知使用了异步队列 queueWatcher
,所以只有在当前 nextTick
异步等待之后才会去执行 watcher
的回调进行渲染之类的操作。而我们手动调用 nextTick
则可将自定义回调排在 watcher
回调之后,也就可以获取到最新页面及数据了
总结
nextTick
的实现并不复杂,相对于前面的文章来说应该也是比较简单的一篇,所以在这对其分析的也比较透彻一些。至此关于响应式原理的部分就结束了,后面将分析 Vue
组件化的实现。
good good staduy day day up