关于Vue的this.$nextTick()和DOM更新

honestrobot

已于 2022-09-02 15:49:49 修改

阅读量475

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-09-02 15:40:08 首次发布

本文链接：https://blog.youkuaiyun.com/honestrobot/article/details/126664139

本文详细介绍了Vue框架中数据异步更新的机制，以及如何利用`this.$nextTick()`确保在DOM更新后执行操作。Vue通过虚拟DOM进行高效的更新，并在实际DOM变化后调用`$nextTick`回调。示例展示了在数据变更后如何正确获取更新后的DOM元素。了解这一机制对于优化Vue应用性能至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this.$nextTick()

vue中的数据更新是异步的，也就是修改Vue实例data中的数据之后，不能立刻获得修改后的dom元素（要等到真实dom更新之后）
vue在dom更新之后会回调this. $n e x tT i c k () ，通过 t hi s .$ nextTick()可以获取到更新之后的dom元素

DOM更新

vue在内存中维护了一个虚拟dom，数据变化时vue会检测到这种变化，然后创建一个新的虚拟dom树木，用新树和旧树对比差异，找到最小更新量再一次性更新到真实dom上。

例子

将vue响应式数据data中的某个变量绑定到某个元素中<span ref="test">{{ name }}</span>
当我们改变name然后马上查看dom
this.name = 'new'
console.log(this.$refs.test.innerHTML)
可以看到打印的值是改变之前的，因为dom更新是异步的。
可以在更新之后的回调中打印
this.$nextTick(() => { console.log(this.$refs.test.innerHTML) })
这样看到的才是更新后的dom