nextTick的实现原理

 nextTick作用:在下次DOM更新循环结束之后执行的延迟回调

首先nextTick并不是浏览器本身提供的一个异步API,而是Vue中,用过由浏览器本身提供的原生异步API封装而成的一个异步封装方法。

它对于浏览器异步API的选用规则如下,Promise存在取由Promise.then,不存在Promise则取MutationObserver,MutationObserver不存在setImmediate,setImmediate不存在最后取setTimeout来实现。


nextTick即有可能是微任务,也有可能是宏任务,从优先去Promise和MutationObserver可以看出nextTick优先微任务,其次是setImmediate和setTimeout宏任务。


同步代码执行完毕之后,优先执行微任务,其次才会执行宏任务

    setTimeout(() => {
      console.log("settimeout 1");
    }, 0);
    console.log("同步 1");
    Promise.resolve().then(() => {
      console.log("promise 1");
    });
    this.$nextTick(() => {
      console.log("nexttick");
    });
    Promise.resolve().then(() => {
      console.log("promise 2");
    });
    console.log("同步 2");
    setTimeout(() => {
      console.log("settimeout 2");
    }, 0);

实现一个nextTick

 public myNextTick(callback: Function) {
    return Promise.resolve().then(() => {
      callback();
    });
  }

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值