Vue.nextTick

一：什么是Vue.nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }

二：为什么用 Vue.nextTick

由于Vue DOM更新是异步执行的，即修改数据时，视图不会立即更新，而是会监听数据变化，并缓存在同一事件循环中，等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。为了获取更新后的DOM，所以设置了 Vue.nextTick()方法。

三：应用场景

1. 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
   原因：created()钩子函数执行时DOM其实并未进行渲染。
2. 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作应该放在Vue.nextTick()的回调函数中。
   原因：Vue异步执行DOM更新，只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变，如果同一个watcher被多次触发，只会被推入到队列中一次。

四：Vue的数据为什么频繁变化但只会更新一次

1. 检测到数据变化
2. 开启一个队列
3. 在同一事件循环中缓冲所有数据改变
4. 如果同一个 watcher (watcherId相同)被多次触发，只会被推入到队列中一次
   (这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的)

不优化：每一个数据变化都会执行: setter->Dep->Watcher->update->run
优化后：执行顺序update -> queueWatcher -> 维护观察者队列（重复id的Watcher处理） -> waiting标志位处理 -> 处理$nextTick（在为微任务或者宏任务中异步更新DOM）