Vue.$nextTick

我们都知道大多数情况下 Vue 数据变化后，相应的 html 也随着发生变化。事实上，当数据发生改变后，对应的 html/DOM 并没有立即重新渲染，

而是开启一个队列，并将改变的数据缓存在同一事件循环中，当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。

如果同一个 watcher 被多次触发，或者如果你用一个for循环来动态改变数据100次，那么这些变化只会被推入到队列中一次。这种在缓存时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要，否则将是一个很大的开销。

为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

【demo1】: 点击按钮调用 add()，页面插入一个元素的同时返回列表dom的长度，发现返回的长度是修改前的旧的dom长度

上述代码浏览器点击效果如下：

解决方案：

将获取dom长度的逻辑放在 this.$nextTick() 回调函数中：

【demo2】: 在 add() 方法中批量修改数据：

解决方案：

将获取dom长度的逻辑放在 this.$nextTick() 回调函数中：