目录
- 正文
- 先看一个简单的问题
- 内部实现
- 先看第一块:
- 再看第二块:
- 然后是第三块:
- 最后是第四块:
正文
先看一个简单的问题
<template> <div @click="handleClick" ref="div">{{ text }}</div </template> <script> export default { data() { return { text: 'old' } }, methods: { handleClick() { this.text = 'new' console.log(this.$refs.div.innerText) } } } </script>
此时打印的结果是什么呢?是 'old'
。如果想让它打印 'new'
,使用 nextTick
稍加改造就可以
this.$nextTick(() => { console.log(this.$refs.div.innerText) })
内部实现
但是你想过它内部是怎么实现的么,和我们写 setTimeout
有什么区别呢?
因为平时工作使用的是Vue2,所以我就以Vue2的最新版本2.6.14为例进行分析,Vue3的实现应该也是大同小异。
源码地址:github.com/vuejs/vue/b…
为了方便阅读我删掉了注释,只关注最重要的实现
if (typeof Promise !== 'undefined' && isNative(Promise)) { const p = Promise.resolve() timerFunc = () => { p.then(flushCallbacks) if (isIOS) setTimeout(noop) } isUsingMicroTask = true } else if (!isIE && typeof MutationObserver !== 'undefined' && ( isNative(MutationObserver) || MutationObserver.toString() === '[object MutationObserverConstructor]' )) { 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 } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { timerFunc = () => { setImmediate(flushCallbacks) } } else { timerFunc = () => { setTimeout(flushCallbacks, 0) } }
先大概扫一遍可知 $nextTick
主要是通过微任务来实现的,其实在2.5版本中,是采用宏任务与微任务相结合的方式实现的,但因为在渲染和事件处理中一些比较怪异的行为(感兴趣的话可以看下issue),所以最终统一采用了微任务。
先看第一块:
if (typeof Promise !== 'undefined' && isNative(Promise)) { const p = Promise.resolve() timerFunc = () => { p.then(flushCallbacks) if (isIOS) setTimeout(noop) } isUsingMicroTask = true }
如果可以使用 Promise
,就采用 promise.then
的方式去执行回调,将任务在下一个tick执行。但是其中 if (isIOS) setTimeout(noop)
这句话是在做什么呢?在iOS >= 9.3.3的UIWebView中,定义的回调函数通过 Promise
的方式推到微任务队列后,队列不刷新,需要靠 setTimeout
来强制更新一下,noop
就是一个空函数。
再看第二块:
else if (!isIE && typeof MutationObserver !== 'undefined' && ( isNative(MutationObserver) || MutationObserver.toString() === '[object MutationObserverConstructor]' )) { 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 }
如果不能用 Promise
就降级使用 MutationObserver
。创建了一个文本节点,并通过 observer
去观察文本节点的变化。 characterData: true
这个配置就是当文字变化的时候就会执行回调。(counter + 1) % 2
会使文本节点的文字在 0
、 1
、 0
、 1
之间不同变化,这样就会被 observer
观察到。MutationObserver
也是微任务。
然后是第三块:
else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { timerFunc = () => { setImmediate(flushCallbacks) } }
当微任务都不被支持时,就要使用宏任务了。其实大多数情况下都不会走到这里,因为 setImmediate
并没有成为正式的标准,并且兼容性很差。
最后是第四块:
else { timerFunc = () => { setTimeout(flushCallbacks, 0) } }
最后在所有方案都行不通时,只能采用 setTimeout
的方式。之所以有第三块是因为虽然都是宏任务,但是 setImmediate
会比 setTimeout
快,所以MDN上才会说 setTimeout(fn, 0)
不能成为 setImmediate
的polyfill。就像作者在注释中写的那样:它仍然是比 setTimeout
更好的选择。
一步一步分析了 $nextTick
源码后,你是否对它的用法理解更加透彻了呢?
以上就是Vue中$nextTick实现源码解析的详细内容,更多关于Vue $nextTick解析的资料请关注自由互联其它相关文章!