admin 管理员组

文章数量: 1184232

$nextTick

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

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.

本文标签： nextTick

版权声明：本文标题：$nextTick 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1687066521a60245.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。