题库/Vue2/题目详解
通用前端约 2 分钟阅读

nextTick 解决什么问题

先理解原理和示例，再练习完整口述与追问。

回答要点

Vue 会对更新排队和去重，数据变化后 DOM 不一定立即更新。nextTick 用于等待本轮相关 DOM 更新完成，再做测量等操作；不等于图片加载完成，也不是所有时序问题的通用补丁。

25～28 的响应式限制、依赖跟踪与异步更新机制可对照 Vue2 官方响应式说明。

原理拆解

Vue 把同一轮中的多次状态修改合并调度，状态本身通常已经改变，但依赖它的 DOM 还没 patch。nextTick 把回调或 Promise 的继续执行安排在相关异步更新队列之后，所以适合“改状态后再读取本轮更新的 DOM”。它关注框架更新完成，并不等于图片加载、网络请求、CSS 过渡或浏览器绘制都已经结束。

示例与推演

js
async showEditor() {
  this.visible = true
  await this.$nextTick()
  if (this.$refs.editor) this.$refs.editor.focus()
}

若 editor 由 v-if 控制，设置 visible 后立刻访问 ref 可能还是 undefined；等待更新后才可访问。若里面还是异步组件，需要额外等待该组件自身的就绪事件。

易错点

反复套 nextTick 不是可靠的异步等待方案。用它包接口请求无法让服务端更快；测量过渡结束应监听对应事件，测量已绘制帧也需要不同的时序协议。

参考回答可直接练习口述

数据写入时 Vue 先安排组件更新，nextTick 等待相关 DOM 刷新后再执行回调或继续 await，常用于显示输入框后聚焦、更新后读尺寸。它不保证接口、图片、字体、动画或异步组件都已完成。遇到回填不对，我先检查数据来源和请求时序，再判断是否确实需要等 DOM，而不是不断追加 nextTick。