Vue.$nextTick你真的懂了吗？

      在使用vue的时候，不知道大家有没有遇到这种情况，明明对这个数据进行更改了，但是当我获取它的时候怎么是上一次的值~~

vue的官方文档是这样说的：

       可能你还没有注意到，Vue异步执行DOM更新。只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。然后，在下一个的事件循环“tick”中，Vue刷新队列并执行实际 (已去重的) 工作。

      白话一点就是说，Vue不可能对每一个数据变化都做一次渲染，它会把这些变化先放在一个异步的队列当中，同时它还会对这个队列里面的操作进行去重，比如你修改了这个数据三次，它只会保留最后一次。这些变化是都可以通过队列的形式保存起来，那现在的问题就来到了，那vue是在事件循环的哪个时机来对DOM进行修改呢？
      我们都知道在一轮事件循环中，同步执行栈中代码执行完成之后，才会执行异步队列当中的内容，那我们获取DOM的操作是一个同步的呀！！那岂不是虽然我已经把数据改掉了，但是它的更新异步的，而我在获取的时候，它还没有来得及改，所以会出现文章开头的那个问题。就轮到Vue.$nextTick( )出场了~

Vue.$nextTick( )

       vue在调用Watcher更新视图时，并不会直接进行更新，而是把需要更新的Watcher加入到queueWatcher队列里，然后把具体的更新方法flushSchedulerQueue 传给nexTick 进行调用。

注意：nextTick 只是单纯通过Promise、setTimeout等方法模拟的异步任务。

class Watcher {
   
  // 执行更新操作
  update() {
   
    queueWatcher(this);
  }
}
const queue = [];
function queueWatcher(watcher: Watcher) {
   
  // 将当前 Watcher 添加到异步队列
  queue.push(watcher);
  //执行异步队列，并传入回调
  nextTick(flushSchedulerQueue);
}
// 更新视图的具体方法
function flushSchedulerQueue() {
   
  let wa