nextTick 相关知识

原理是什么:

vue用异步队列的方式来控制DOM更新和nextTick回调先后执行

microtask因为其高优先级特性,能确保队列中的微任务在一次事件循环前被执行完毕

因为兼容性问题,vue不得不做了microtask向macrotask的降级方案

是如何监听到函数完成的:

首先必须知道能实现监听DOM的api是MutationObserver

vue并不是使用MutationObserver监听节点dom的更新,而是通过它打包队列控制的目的(macrotask总要等到microtask都执行完后才能执行,microtask有着更高的优先级),

vue进行DOM更新内部也是调用nextTick来做异步队列控制。而当我们自己调用nextTick的时候,它就在更新DOM的那个microtask后追加了我们自己的回调函数,从而确保我们的代码在DOM更新后执行,同时也避免了setTimeout可能存在的多次执行问题。

是如何做的兼容:

microtask的降级方案依次是:promise,macrotask

(首选promise,如果不支持的话,)

macrotask降级的方案依次是:setImmediate、MessageChannel、setTimeout.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值