Vue nextTick（ "version": "2.7.16"）

[xiaotiandada]

Vue.js 中的 nextTick 方法详解

Vue.js 提供了一个非常实用的工具方法 nextTick，它在异步更新队列中起到了核心作用，帮助开发者处理与 DOM 更新相关的操作。本文将深入解析 nextTick 的功能、使用场景及其实现原理。

什么是 nextTick？
nextTick 是 Vue.js 内置的一个方法，用于在下次 DOM 更新循环结束之后执行延迟回调。在Vue中，数据变化到DOM更新并不是同步进行的，而是通过异步队列来批量处理更新，以提高性能。因此，当你修改了数据并希望基于新的DOM状态做某些操作时，直接操作可能无法获取到预期的效果，此时就需要用到 nextTick。

使用方式
基本用法

Vue.nextTick(() => {
  // 这里 DOM 已经更新了
});

或者在组件内部：

this.$nextTick(() => {
  // 这里 DOM 已经更新了
});

带参数的回调

Vue.nextTick((newVal, oldVal) => {
  // newVal 和 oldVal 分别是新旧值
}, this.someProperty);

为什么需要 nextTick？
Vue为了提高效率，对数据变化到视图更新的过程采用了异步队列处理机制。这意味着当你修改了数据后，并不会立即触发DOM更新，而是先将这个变化记录下来，等到所有的数据变化完成后再统一进行DOM的更新。因此，如果你需要在数据变化后立即根据新的DOM状态进行操作（如获取元素尺寸、滚动位置等），就必须等待Vue完成DOM更新，而nextTick正是为此设计的。

使用场景
获取更新后的DOM元素属性：在修改数据后，如果需要立即读取或操作DOM元素的新状态，应使用nextTick。
基于新数据的进一步操作：在响应式数据改变后，需要基于新的数据状态执行某些逻辑时，使用nextTick可以确保逻辑执行时数据已经更新完毕。
避免不必要的渲染：通过在nextTick回调中修改数据，可以将一系列连续的数据更改合并成一次DOM更新，减少重绘和回流。
实现原理简述
Vue的nextTick实现依赖于微任务（如Promise.resolve().then()）或宏任务（如setTimeout(fn, 0)），具体取决于浏览器的支持情况和Vue配置。在最新的Vue版本中，优先使用原生的Promise来创建微任务，以实现更高的执行效率。当所有当前宏任务执行完毕且微任务队列清空后，Vue会检查是否有待处理的更新任务，如果有，则执行这些更新，然后执行nextTick中的回调函数。

总结
Vue.js的nextTick方法是处理数据变化与DOM更新异步性的重要工具，它允许开发者在Vue完成DOM更新后执行回调，确保操作基于最新的DOM状态。掌握nextTick的使用对于编写高效、可靠的Vue应用至关重要。无论是简单的DOM操作还是复杂的逻辑控制，合理利用nextTick都能使代码更加健壮，提升用户体验。

timerFunc 什么时候是微任务 什么时候是宏任务

这段代码来自Vue.js框架的一部分，用于实现其内部的异步更新队列机制，即nextTick函数。根据环境的不同，timerFunc会选择使用不同的策略来调度回调函数的执行，这决定了它是作为微任务还是宏任务执行。下面是对代码逻辑的详细解释：

微任务（Microtask）
Promise: 如果浏览器支持原生Promise并且是原生实现，timerFunc会使用Promise.then来调度flushCallbacks函数。这意味着回调函数将会在一个微任务队列中执行，通常在当前执行栈和渲染之前完成。这是首选方案，因为它提供了更快的响应速度且通常具有更好的性能表现。

MutationObserver: 在不支持原生Promise或特定环境下（如iOS UIWebView的某些版本中Promise存在bug），代码会尝试使用MutationObserver来模拟微任务行为。通过观察一个文本节点的字符数据变化来触发回调执行，这也属于微任务范畴。

宏任务（Macrotask）
setImmediate: 如果浏览器支持原生setImmediate（主要在IE和Edge中），timerFunc会使用它来调度回调。尽管setImmediate在一些情况下可以提供比setTimeout(fn, 0)更早的执行时机，但它仍然属于宏任务。

setTimeout: 当上述所有选项都不可用时，最终会退回到使用setTimeout(fn, 0)来安排回调执行。这会将任务放入宏任务队列，在当前执行栈和所有的微任务完成后执行。

总结
何时为微任务：当环境支持并选择了使用Promise.then或MutationObserver时，timerFunc调度的任务作为微任务执行。
何时为宏任务：当只能选择使用setImmediate或setTimeout时，timerFunc调度的任务作为宏任务执行。
Vue.js框架通过这样的策略，旨在优化更新流程，确保DOM操作和其他副作用在数据变化之后的合适时机执行，同时尽可能地利用高效的微任务机制来提升用户体验。

导出了 isUsingMicroTask 标识给外部使用

export let isUsingMicroTask = false