博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue源码阅读一:说说vue.nextTick实现
阅读量:7128 次
发布时间:2019-06-28

本文共 2570 字,大约阅读时间需要 8 分钟。

用法:

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

疑惑:

怎么实现的延迟回调

原理:

  1. JavaScript语言的一大特点就是单线程,同一个时间只能做一件事
  2. JavaScript任务可以分为两种,一种是同步任务,一种是异步任务
  3. 异步任务大致分为,宏任务,和微任务
  4. 所有同步任务都在主线程上执行,形成一个执行栈
  5. 主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
  6. 一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列"中的微任务,其次是宏任务,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
  7. 主线程不断重复上面的第6步。

vue实现:

vue 大多数情况下优先使用微任务, 很少的地方使用宏任务

vue nextTick 宏任务实现

  • 优先检测 setImmediate
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {  macroTimerFunc = () => {    setImmediate(flushCallbacks)  }}复制代码

setImmediate 浏览器支持情况

  • 其次检测 MessageChannel 支持情况
else if (typeof MessageChannel !== 'undefined' && (  isNative(MessageChannel) ||  // PhantomJS  MessageChannel.toString() === '[object MessageChannelConstructor]')) {  const channel = new MessageChannel()  const port = channel.port2  channel.port1.onmessage = flushCallbacks  macroTimerFunc = () => {    port.postMessage(1)  }} 复制代码

MessageChannel 浏览器支持情况

  • 上面都不支持就使用最原始的setTimeout
else {  /* istanbul ignore next */  macroTimerFunc = () => {    setTimeout(flushCallbacks, 0)  }}复制代码

vue nextTick 微任务实现

  • 优先检测 Promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {  const p = Promise.resolve()  microTimerFunc = () => {    p.then(flushCallbacks)    // 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)  }}复制代码

Promise 浏览器支持情况

  • 如果不支持Promise, 还是使用宏任务
else {  // fallback to macro  microTimerFunc = macroTimerFunc}复制代码

vue中什么地方用宏任务,什么地方用微任务?

从源码中可以看出,在DOM事件中使用Vue.nextTick 默认使用宏任务, 其他地方使用Vue.nextTick默认使用微任务。

其实从源码中注释中可以看出Vue最开始都是使用微任务方式,后面出现了bug,才引入了宏任务方式

// Here we have async deferring wrappers using both microtasks and (macro) tasks.// In < 2.4 we used microtasks everywhere, but there are some scenarios where// microtasks have too high a priority and fire in between supposedly// sequential events (e.g. #4521, #6690) or even between bubbling of the same// event (#6566). However, using (macro) tasks everywhere also has subtle problems// when state is changed right before repaint (e.g. #6813, out-in transitions).// Here we use microtask by default, but expose a way to force (macro) task when// needed (e.g. in event handlers attached by v-on).复制代码

产考资料:

转载于:https://juejin.im/post/5ae2dad851882567105f7bd3

你可能感兴趣的文章
我的友情链接
查看>>
tensorflow入门简单卷积神经网络
查看>>
我的友情链接
查看>>
the dude 使用教程和一点感觉
查看>>
Spring4+Hibernate4 注解整合配置
查看>>
螺旋数字程序
查看>>
Pyhton 第九章 正则表达式
查看>>
mysql主从配置
查看>>
Jconsole远程监控tomcat 的JVM内存(linux、windows)
查看>>
分布式项目(一)iot-pt
查看>>
JFreeChart开源图表组件在Java开发中的应用(一)
查看>>
使用ZooKeeper ACL特性进行znode控制
查看>>
struts2 跳转类型介绍 result type=chain、dispatcher、redirect(redirect-action)
查看>>
宜春之行
查看>>
我的友情链接
查看>>
Exchange2010 dag 的缷载
查看>>
2011/11/14 1:52 坚持就会胜利
查看>>
oracle概念和术语 建表时的一些参数pctfree initrans maxtrans sto
查看>>
我的友情链接
查看>>
转ApplicationContext的三种实现方式以及在web.xml配置的两种方式
查看>>