Vue nextTick — 等待DOM更新

理解Vue异步DOM更新机制，用nextTick在DOM更新后执行代码 · 难度：进阶 · +15XP

Vue的DOM更新是异步的

一个重要的概念：你修改了数据，Vue不会立即更新DOM。

Vue会把多次数据修改"攒"在一起，在下一次事件循环中批量更新DOM——为了性能。

问题场景

this.message = "Hello";
console.log(this.$el.textContent);  // 还是旧值！DOM还没更新！

nextTick 解决

nextTick 让你在DOM更新完成之后执行代码：

this.message = "Hello";
this.$nextTick(() => {
  console.log(this.$el.textContent);  // 现在是最新值了！
});

常见使用场景

1. 自动聚焦输入框：显示一个刚渲染出来的输入框，需要等DOM出来才能focus
2. 滚动到底部：列表新增了一项，需要等DOM更新后才能scrollTo
3. 获取元素尺寸：内容刚展开，需要等过渡完成再量高度

动手试试

右边点"添加"后，新项目会用nextTick自动滚动到可见位置。