day207-Vue-nextTick()

要点

  1. nextTick用法
  2. nextTick源码相关
  3. 事件循环
  4. 源码中的降级策略

nextTick作用

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。来源

源码

// 850555d on 20 Dec 2018
if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// 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) // 文本节点变化监听
}
}

以上主要作用就是:监听文本变动是否完毕。

事件循环

  • 常见的microtask有:
    PromiseMutationObserver、Object.observe(废弃),以及nodejs中的process.nextTick

  • 常见的macrotasksetTimeoutMessageChannelpostMessagesetImmediate

降级策略

在vue2.x版本的源码文件next-tick.js中,你还可以看到有其他的一些兼容性方法。

参考

Vue源码详解之nextTick:MutationObserver只是浮云,microtask才是核心!

全面解析Vue.nextTick实现原理

文章作者: lmislm
文章链接: http://lmislm.com/2019/08/08/2019-08-08/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog