nextTick的理解

Sunsine_C

已于 2022-06-22 17:38:59 修改

阅读量454

点赞数 1

分类专栏： nextTick 文章标签： javascript vue

于 2021-06-01 15:36:19 首次发布

本文链接：https://blog.csdn.net/ysj1218/article/details/117444078

版权

nextTick 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

Vue中的DOM更新并不是实时的，当数据改变后，vue会把渲染watcher添加到异步队列，异步执行，同步代码执行完成后再统一修改DOM。

我们先来了解一下 MutationObserver / setImmediate
1. MutationObserver: 接口提供了监视DOM树所做更改的能力。

MutationObserver() 构造函数是 MutationObserver 接口内容的一部分，创建并返回一个新的观察器(包含监听DOM变化回调函数的MutationObserver对象)，会在指定触发DOM事件时，调用指定的回调函数。
但是对于DOM的观察不会立即启动，必须先调用 observe() 方法来确认，要监听哪一部分的DOM以及要响应哪些更改。

2. setImmediate

把一些需要长时间运行的操作放在一个回调函数里，在浏览器完成后面的其他语句后就立即执行。但是它是非标准的方法，建议不要在生产环境使用它。

接下来来看一下源码：

// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore next, $flow-disable-line */
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
} else 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)
}
isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    // Fallback to setImmediate.
    // Technically it leverages the (macro) task queue,
    // but it is still a better choice than setTimeout.
    timerFunc = () => {
        setImmediate(flushCallbacks)
    }
    } else {
    // Fallback to setTimeout.
    timerFunc = () => {
        setTimeout(flushCallbacks, 0)
    }
}

看到有几个条件判断: