$nextTick

最新推荐文章于 2024-07-02 16:24:14 发布

xiongdaandxiaomi

最新推荐文章于 2024-07-02 16:24:14 发布

阅读量4.1k

点赞数 1

分类专栏： Vue 文章标签： $nextTick Vue

本文链接：https://blog.csdn.net/xiongdaandxiaomi/article/details/89675286

版权

Vue 专栏收录该内容

64 篇文章 2 订阅

订阅专栏

我们先看下面代码示例效果

1）示例

<body>
	<div id="app" >
		<div id='div' v-if="showDiv">这是一段文本</div>
		<button @click="getText">获取div内容</button>
	</div>
</body>	
<script >
var app = new Vue({
	el:'#app',
	data : {
		showDiv: false,
	},
	
	methods: {
		getText(){
			this.showDiv = true;
			var text = document.getElementById('div').innerHTML;
			console.log(text)
		}
	}

})
</script>

2）页面效果

在这里插入图片描述

我们看到在控制台会抛出一个错误，意思是获取不到div元素。这是涉及到一个概念：异步更新队列。
说明：Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后在下一个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。所以你用一个for循环来动态改变数据100次，其实它只会应用最后一个改变，如果没有这种机制，DOM就要重绘100次，这是一个很大的开销。
在执行this.showDiv = true;时，div仍然还没有被创建出来，直到下一个Vue事件循环时，才开始创建。$nextTick 就是用来直到什么时候DOM更新完成。方法修改为

getText(){
	this.showDiv = true;
	this.$nextTick(function () {
		var text = document.getElementById('div').innerHTML;
		console.log(text)
	})
	
}

小结

理论上我们不应该主动操作DOM，因为Vue的核心思想就是数据驱动DOM，但是在很多业务中我们避免不了会使用第三方库，比如popper.js、swiper等，这些基于原生JavaScript的库都有创建和更新及销毁的完整生命周期，与Vue配合使用时，就要利用好$nextTick.

xiongdaandxiaomi

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
$nextTick

我们先看下面代码示例效果1）示例<body> <div id="app" > <div id='div' v-if="showDiv">这是一段文本</div> <button @click="getText">获取div内容</button> </div></body> <s...
复制链接

扫一扫

专栏目录