$nextTick()、为什么用Vue.nextTick()、异步

为什么用Vue.nextTick()

异步：

所有同步任务都在主线程上执行，形成一个执行栈。
主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件（所以，也叫事件队列），进行排队（处于等待状态）。
当执行栈中的所有同步任务执行完后，就会读取任务队列（事件队列）中的任务。
主线程不断重复第三步。直到任务队列和执行栈里的代码执行完毕。

异步更新队列：
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.thenMutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
应用场景
将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})

关于$nextTick()部分的更多知识可查看以下连接（vue官网）https://cn.vuejs.org/v2/guide/reactivity.html