【vue笔记】this.$nextTick()

Vue中this.$nextTick()详解

最新推荐文章于 2025-10-11 22:42:15 发布

原创最新推荐文章于 2025-10-11 22:42:15 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细解析了Vue.js框架中this.$nextTick()方法的用途与工作原理。此方法确保在DOM更新后执行回调，对于依赖于最新DOM状态的操作至关重要。通过实例展示了如何在数据变化后正确获取更新的DOM元素。

this.$nextTick()在DOM更新循环之后执行延迟回调，在修改数据之后使用这个方法可以获取更新后的DOM，例如：

// 修改数据
this.message='changed'
console.log(this.$el.textContent)
// 输出的是原message的数据，因为重新设置message后，DOM还没有更新

Vue.nextTick*(function(){
	console.log(this.$el.textContent)
	// 输出得到'changed'，nextTick()中的代码会在DOM更新后执行
}