【Vue异步更新DOM队列】

最新推荐文章于 2024-06-30 22:34:06 发布

原创最新推荐文章于 2024-06-30 22:34:06 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

VUE 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了Vue框架中异步更新DOM队列的工作原理。在changeValue方法中，通过设置this.value，初始时watch无法监听到变化。但通过$nextTick包裹赋值操作，使得DOM更新后，watch能够正确监听到value的变化。这展示了Vue如何优化渲染性能，避免不必要的DOM操作。

Vue异步更新DOM队列

export default {
	data() {
		return {
			value: 123
		}
	},
	watch: {
		value(newValue) {
			// 当changeValue事件触发，只会监听到一次
			console.log(newValue) // 789
		}
	},
	methods: {
		changeValue() {
			// Dom树的更新也是如此，避免重复的Dom渲染
			this.value = 456 // watch无法监听
			/* 如果一定要让watch监听到两次，可以使用
				* $nextTick(() => {
				*	this.value = 789
				* })
			*/
			this.value = 789 // watch可以监听
		}
	}
}