Vue 基础面试题, 什么是 Vue 的 nextTick?有什么作用?

Step 1

Q:: 什么是 Vue 的 nextTick？有什么作用？

A:: Vue 的 nextTick 是一个用于在下一次 DOM 更新循环结束后执行延迟回调的工具。由于 Vue 是异步执行 DOM 更新的，当你在修改数据后立即访问 DOM 元素，可能还未更新完毕，此时就可以用 nextTick 来等待 DOM 更新完成后再执行操作。

Step 2

Q:: Vue 的 nextTick 如何使用？

A:: 在 Vue 中，nextTick 可以作为一个方法直接调用。它接受一个回调函数，该函数会在 DOM 更新后被调用。例如：this.$nextTick(() => { // 操作 DOM });。同时，nextTick 也返回一个 Promise 对象，这样你也可以用 async/await 来处理：await this.$nextTick(); // 操作 DOM。

Step 3

Q:: Vue 的 nextTick 在源码中是如何实现的？

A:: Vue 的 nextTick 实现是基于浏览器的微任务（如 Promise 或 MutationObserver）来实现的。如果浏览器环境不支持微任务，则会使用宏任务（如 setTimeout）作为降级方案。源码中，Vue 会将回调推入一个队列，在合适的时机（即 DOM 更新后）将队列中的回调一并执行。

Step 4

Q:: 什么时候需要使用 Vue 的 nextTick？

A:: 当你需要在数据更新后立即操作 DOM，确保 DOM 已经被 Vue 正确更新时，通常需要使用 nextTick。比如，在更新数据后需要根据新的 DOM 结构计算某些属性，或者触发一些依赖于最新 DOM 状态的插件。