Vue 修改数据后怎么等 DOM 更新再测量高度

在 Vue 中改了列表、展开状态或提示文案后，马上读取元素高度，拿到旧值并不奇怪。原因是响应式数据的修改和 DOM 刷新不是同一个同步动作。一次状态修改后要测量更新后的节点，最小做法是：修改数据，await nextTick()，再通过模板 ref 调用 getBoundingClientRect()。

为什么同步读取会得到修改前的高度

Vue 会把一轮响应式变更合并到更新队列中。比如展开一个详情面板时，expanded.value = true 先改变的是响应式状态；模板对应的节点和文本要等 Vue 刷新队列后才反映出来。下面两次读取发生在同一个 JavaScript 调用栈里，因此第二次仍可能是旧布局：

expanded.value = true
console.log(panelRef.value?.getBoundingClientRect().height)

这里的问题不是 getBoundingClientRect() 失效，而是读取时机太早。不要用固定的 100 毫秒延时猜测浏览器何时完成更新；组件更新完成后，应该由 Vue 自己给出同步点。

用 nextTick 等 DOM 刷新后再测量

Vue 3 可以从 vue 导入 nextTick。把模板 ref 绑定到要测量的元素，修改数据后等待一次更新，再读取尺寸：

如果只关心内容盒子的 CSS 高度，也可以读取 element.offsetHeight；需要小数像素、边框和当前变换后的矩形时，getBoundingClientRect() 更直观。模板 ref 在元素尚未挂载、条件分支刚切换或组件已经卸载时可能是 null，所以示例保留了空值保护。

Vue 2 旧写法迁移到 Vue 3 要改哪里

从 Vue 2 迁移时，常见旧代码会使用实例上的 this.$nextTick()。Vue 3 的组合式 API 示例应显式导入 nextTick，不要把 Vue.nextTick() 当作模块 API 继续调用：

这张表解决的是 API 入口差异，不改变“先改状态、再等 Vue 更新、最后测量”的时序。Vue 官方迁移指南也把 Vue 3 的全局 API 调整为具名导入，这对可树摇构建的模块项目尤其重要。

nextTick 之后仍变化，应该监听尺寸

nextTick() 只能说明 Vue 这轮 DOM 更新已经完成。图片尚未解码、字体尚未应用、异步内容后来插入，都会在之后再次改变高度。此时只调用一次 nextTick() 仍然不够，可以把一次测量函数交给 ResizeObserver：

import { onBeforeUnmount, onMounted, ref } from 'vue'

const panelRef = ref(null)
const panelHeight = ref(0)
let observer

function measure(element) {
  panelHeight.value = element.getBoundingClientRect().height
}

onMounted(() => {
  const element = panelRef.value
  if (!element) return

  observer = new ResizeObserver(() => measure(element))
  observer.observe(element)
  measure(element)
})

onBeforeUnmount(() => observer?.disconnect())

观察器适合“尺寸变化就重新计算”的场景，例如折叠面板、可变长度列表或响应式容器。它不是 nextTick() 的替代品：状态切换后若要立刻执行一次依赖新节点的逻辑，仍先等待 Vue 更新；观察器则负责后续尺寸变化和组件销毁时的清理。

发布前的四项测量检查

• 测量是否紧跟在状态修改后的 await nextTick() 之后，而不是先读一次再等待。
• 模板 ref 是否可能暂时为空，条件渲染分支切换后是否重新获取了元素。
• 元素是否被 display: none 隐藏；隐藏节点的高度不能代表展开后的真实布局。
• 使用 ResizeObserver 时是否在卸载阶段调用 disconnect()，避免组件销毁后仍保留观察关系。

相关问题：nextTick 能等待图片加载完成吗？不能，它只等待 Vue 当前一轮 DOM 更新；图片应结合加载事件或尺寸观察。为什么不用 setTimeout？延时只是在猜时机，无法稳定覆盖不同设备、字体和资源加载速度。

官方参考：Vue 全局 API：常规、Vue 3 全局 API 迁移指南。