您现在的位置是：网站首页> 编程资料编程资料
Vue中$nextTick实现源码解析_vue.js_
2023-05-24
398人已围观
简介 Vue中$nextTick实现源码解析_vue.js_
正文
先看一个简单的问题
{{ text }}
此时打印的结果是什么呢？是 'old'。如果想让它打印 'new'，使用 nextTick 稍加改造就可以
this.$nextTick(() => { console.log(this.$refs.div.innerText) }) 内部实现
但是你想过它内部是怎么实现的么，和我们写 setTimeout 有什么区别呢？
因为平时工作使用的是Vue2，所以我就以Vue2的最新版本2.6.14为例进行分析，Vue3的实现应该也是大同小异。
为了方便阅读我删掉了注释，只关注最重要的实现
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解析的资料请关注其它相关文章！
相关内容
- Vue父子组件通信全面详细介绍_vue.js_
- 关于.prettierrc代码格式化配置方式_vue.js_
- Vue中如何设置全局的cookie对象_vue.js_
- 深入理解函数执行上下文 this_JavaScript_
- 简易的redux createStore手写实现示例_React_
- 前端Vue设置cookie、删除cookie,获取cookie方式_vue.js_
- jQuery中隐藏元素的hide方法及说明_jquery_
- jquery中在页面加载完成后执行某个方法_jquery_
- Vue mergeProps用法详细讲解_vue.js_
- Vue实现电商网站商品放大镜效果示例_vue.js_
