一、定义与作用
在 Vue.js 中，`nextTick`是一个非常重要的概念，它用于在下次 DOM 更新循环结束之后执行延迟回调。当数据发生变化时，Vue.js 会开启一个异步更新队列，将同一事件循环内的数据变化导致的所有 DOM 更新合并到一个更新任务中，这样可以避免频繁地更新 DOM，提高性能。而`nextTick`提供了一种机制，让开发者能够在 DOM 更新完成后执行一些操作。
二、使用场景
1. 获取更新后的 DOM 信息
当你通过 Vue 的数据绑定改变了一个元素的高度，然后想立即获取这个元素更新后的高度，直接在数据更新后获取可能会得到旧的值，因为 DOM 可能还没更新。这时就可以使用`nextTick`。
import { ref, nextTick } from "vue";export default {setup() {const listItemHeight = ref("20px");const increaseHeight = async () => {listItemHeight.value = "40px";await nextTick();const listItem = document.querySelector(".list-item");console.log("更新后的高度:", listItem.offsetHeight);};return {listItemHeight,increaseHeight,};},template:'<div><button @click="increaseHeight">增加高度</button><div class="list-item" :style="{ height: listItemHeight }">列表项</div></div>',};三、实现原理（简单理解）
Vue.js 在更新 DOM 时，会将更新操作放入一个异步队列中。`nextTick`函数内部会检查浏览器的微任务（Promise、MutationObserver 等）和宏任务（setTimeout 等）队列的执行情况，尽量将回调函数放入微任务队列中优先执行。如果浏览器不支持微任务，就会使用宏任务来模拟。这样就能够确保回调函数在 DOM 更新完成后执行。
let callbacks = [];let pending = false;function nextTick(cb) {callbacks.push(cb);if (!pending) {pending = true;Promise.resolve().then(() => {pending = false;const copies = callbacks.slice();callbacks.length = 0;copies.forEach((cb) => cb());});}}
