Vue $nextTick

Posted 2021-02-09 niusan

<!--

应用场景：

点击一个按钮，由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);

});