Vue中nextTick的原理分析

更新时间：2025年02月21日 16:43:52 作者：遇见很ok

本文详细介绍了Vue中nextTick的原理和使用方法,Vue采用异步渲染机制,通过nextTick可以确保在DOM更新后执行回调,nextTick依赖微任务和宏任务,优先使用Promise,降级到MutationObserver/setTimeout,Vue3进一步优化了nextTick,减少了复杂度并提升了性能

Vue中nextTick原理

1. 为什么需要 nextTick

Vue 采用 异步渲染机制，当响应式数据发生变化时，Vue 并不会立即更新 DOM，而是将这些变化放入一个队列中，并在 同一事件循环（Event Loop）中合并相同的修改，最后执行批量更新。

这样做的目的是 提升性能，避免不必要的重复渲染。

例如：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello"
    };
  },
  mounted() {
    this.msg = "Vue";
    console.log(document.querySelector("div").innerText); // 仍然是 "Hello"
    this.$nextTick(() => {
      console.log(document.querySelector("div").innerText); // 现在是 "Vue"
    });
  }
};
</script>

为什么 console.log 还是 "Hello"？

因为 Vue 在 this.msg = "Vue" 时 不会立即更新 DOM，而是等本轮事件循环结束后再更新。因此，我们需要 nextTick 来确保获取到更新后的 DOM。

2. nextTick 的原理

Vue 的 nextTick 本质上是一个 异步任务调度器，它会在当前 DOM 任务完成后执行回调。其内部原理主要依赖 微任务（Microtask）和宏任务（Macrotask）。

2.1 任务队列

Vue 内部维护了一个 回调队列（callback queue），当 nextTick 被调用时，它会将回调函数 推入队列，然后等待 Vue 进行 DOM 更新后，再依次执行这些回调。

2.2 任务调度策略

nextTick 采用 优雅降级 的策略，在不同环境下选择最佳的异步方法：

Promise（Microtask）（首选，现代浏览器支持）
MutationObserver（Microtask）（比 setTimeout 更快）
setImmediate（Macrotask）（仅 IE 支持）
setTimeout（Macrotask）（最后的兜底方案）

代码实现：

function nextTick(callback) {
  const p = Promise.resolve();
  p.then(callback);
}

在 Vue 3 中：

let callbacks = [];
let pending = false;

function flushCallbacks() {
  pending = false;
  const copies = callbacks.slice(0);
  callbacks.length = 0;
  for (let cb of copies) {
    cb();
  }
}

export function nextTick(cb) {
  callbacks.push(cb);
  if (!pending) {
    pending = true;
    Promise.resolve().then(flushCallbacks);
  }
}

流程解析：

每次调用 nextTick(cb)，将 cb 放入 callbacks 队列中。
只要 pending === false，就启动 微任务（Promise.then）。
微任务执行 flushCallbacks，依次调用 callbacks 队列中的所有回调。

3. nextTick 在 Vue 2 和 Vue 3 的区别

3.1 Vue 2 的 nextTick

在 Vue 2 中，nextTick 主要依赖：

Microtask（Promise.then, MutationObserver）
Macrotask（setImmediate, setTimeout）
维护了一个 异步任务队列，用于批量执行 nextTick 回调。

3.2 Vue 3 的 nextTick

Vue 3 主要优化：

只使用 Promise 作为微任务（不再使用 MutationObserver）。
更高效的 异步队列处理机制。

Vue 3 中的 nextTick：

const resolvedPromise = Promise.resolve();
export function nextTick(fn) {
  return fn ? resolvedPromise.then(fn) : resolvedPromise;
}

优化点

直接使用 Promise.resolve().then(fn)，避免了 Vue 2 复杂的回调队列管理。
如果不传入 fn，则返回一个 Promise，支持 await this.$nextTick()。

4. nextTick 的使用场景

4.1 在 DOM 更新后执行操作

<template>
  <div ref="box">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return { message: "Hello" };
  },
  methods: {
    updateMessage() {
      this.message = "Vue";
      this.$nextTick(() => {
        console.log(this.$refs.box.innerText); // "Vue"
      });
    }
  }
};
</script>

4.2 在 watch 中等待 DOM 更新

watch(() => state.count, async (newVal) => {
  await nextTick();
  console.log(document.querySelector("#counter").innerText); // 确保 DOM 已更新
});

4.3 在 Vue 3 setup 中使用

import { nextTick, ref } from "vue";

setup() {
  const message = ref("Hello");
  
  const updateMessage = async () => {
    message.value = "Vue";
    await nextTick();
    console.log(document.querySelector("#msg").innerText);
  };

  return { message, updateMessage };
}

总结

nextTick 是 Vue 提供的一个 异步任务调度方法，用于在 DOM 更新后执行回调。
Vue 采用 异步批量更新 机制，nextTick 可确保 数据变更后获取到最新的 DOM。
Vue 内部采用 Promise（Microtask）优先，降级到 MutationObserver / setTimeout 作为备用方案。
Vue 3 进一步优化了 nextTick，减少了不必要的复杂度，提升了性能。

你可以简单理解为：

Vue 在修改数据后，不会立即更新 DOM，而是 批量合并修改，并在下一次 事件循环（Event Loop）结束时更新 DOM。nextTick 让你可以等到 DOM 更新完成后再执行操作。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue
nextTick

vuedraggable实现拖拽功能
这篇文章主要为大家详细介绍了vuedraggable实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
.eslintrc配置目录及配置项的使用方式
这篇文章主要介绍了.eslintrc配置目录及配置项的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
element 时间选择器禁用选择的使用示例
最近做项目遇到的一个功能,禁止用户在输入内容的时候选择今天以前的日期或者包含今日的日期,本文主要介绍了element 时间选择器禁用选择的使用示例,感兴趣的可以了解一下
2023-09-09
vue 跳转页面$router.resolve和$router.push案例详解
这篇文章主要介绍了vue 跳转页面$router.resolve和$router.push案例详解,这样实现了既跳转了新页面,又不会让后端检测到页面链接不安全之类的,需要的朋友可以参考下
2023-10-10
vue指令防止按钮连点解析
这篇文章主要介绍了vue指令防止按钮连点解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue+axios+mock.js环境搭建的方法步骤
本篇文章主要介绍了vue+axios+mock.js环境搭建的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
vue实现弹出框内嵌页面展示并添加tab切换展示实时加载
弹窗效果是在Web开发中经常用到的一种交互效果,这篇文章主要给大家介绍了关于vue实现弹出框内嵌页面展示并添加tab切换展示实时加载的相关资料,需要的朋友可以参考下
2024-01-01
vue3引入Element-plus的详细步骤记录
Element Plus是为适配Vue3而对Element UI进行重构后产生的前端组件库,包含丰富的基础组件,下面这篇文章主要给大家介绍了关于vue3引入Element-plus的相关资料,需要的朋友可以参考下
2022-04-04
vue项目中使用百度地图的方法
这篇文章主要介绍了在vue项目中使用百度地图的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴借鉴价值,需要的朋友可以参考下
2018-06-06
测试平台开发vue组件化重构前端代码
这篇文章主要为大家介绍了测试平台开发vue组件化重构前端代码，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-05-05