Vue $nextTick

<!-- 应用场景: 点击一个按钮,由v-if让div显示,并且拿到div的内容的时候。 在div还没有被创建出来的时候,是拿不到内容的。 这里涉及到了Vue异步更新队列的概念 Vue观察数据变化的时候并不是直接更新DOM,而是开启一个队列,并 缓冲在同一事件循环中的发生的所有数据的改变,在缓冲时会去除重复数据, 从而避免不必要的计算和DOM操作;在下一个事件循环tick中,Vue刷新队列并执行

 

-->

用法:  

<button @click="getSome">显示隐藏div。</button> <div v-if="show" ref="divContainer">平安喜乐,万事胜意。</div> //用来知道什么时候DOM更新完成 this.$nextTick(() => { let text = this.$refs.divContainer.innerHTML; console.log(text); });

 


 

上一篇:数据改变,视图未变解决


下一篇:Vue异步更新DOM