vue的nextTick为什么一定会比promise更先执行？

  • Z时代
  • 2024-02-16
  • 分类：IT

vue的nextTick为什么一定会比promise更先执行？

nextTick内部打比按照promise进行，那么是怎么做到比逻辑中的promise更早执行的？看源码写的是Promise.resolve().then(callback)执行回调代码callback

if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    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)
  }
  isUsingMicroTask = true
}

回答：

首先我不知道题主是怎么得出一定这个结果的，nextTick并不一定比Promise快，它本来就是Promise就得遵循Promise的规范和顺序，但是nextTick是对Promise的封装，所以

nextTick(fn1) // Promise
nextTick(fn2)
nextTick(fn3)

实际上就初始化了一个Promise就在第一个nextTick执行的时候
后面调用的fn2,fn3可以理解为都是往第一个fn1函数里push的，所以下面的执行顺序就是fn1 fn2 fn3 fn4因为fn1 fn2 fn3合并为了一个函数，就造成了 fn2 和fn3比fn4快

nextTick(fn1) // Promise1
Promise.resolve().then(fn4) // Promise2
nextTick(fn2)
nextTick(fn3)

自始至终只有2个Promise 第一次执行nextTick的fn1和fn4，因为fn1声明在fn4之前所以fn1比fn4快

这只限于同一个事件循环，在下一次事件循环第一次执行nextTick依然会有一个新的Promise

回答：

既然你都找打源码了基本已经找到原因了，vue的promise实例是初始化或者说引入vue的时候就已经创建好了，所以会比你代码中的promise先执行，如果你要你的promise先执行，那么你可以用nextTick的另一种调用方式：this.$nextTick().then(callback),当nextTick没有回调时会返回一个新的promise实例，具体你可以再看看源码中的nextTick部分

以上是 vue的nextTick为什么一定会比promise更先执行？ 的全部内容， 来源链接： utcz.com/p/936357.html

回到顶部