学习笔记《Vue 的 nextTick》

在调试代码的时候，发现由于 Ajax 异步回调的问题，数据到位晚于Reactive，造成页面的程序错误，在处理这个问题的过程中，发现自己对于异步问题的了解比较弱，学习一下：

几个核心的问题包括：

基本概念：

Jake Archibald 的文章介绍的非常的好：
https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

对 nextTick 机制的梳理

《从Vue.js源码看nextTick机制》：
https://zhuanlan.zhihu.com/p/30451651

Vue 中的 nextTick

官方文档中写的非常清晰：
https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

大致的意思是 Vue 会依次尝试（因为不同浏览器的原因） Promise.then, MutationObserver, setTimeout(fn, 0) 来对 DOM 进行异步渲染。

Promise.then, MutationObserver 属于 microtasks，会等主 task 完成以后再执行，setTimeout(fn, 0) 会设定 4ms 的延迟进行执行

Vue 提供了一个 nextTick 的方法，方便进行在 DOM 渲染完毕以后的操作：

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // modify data
      this.message = 'changed'
      // DOM is not updated yet
      this.$nextTick(function () {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }
})

备注

Ajax 异步回调是一个相对 nextTick 更为迟缓的过程（无论是 Promise.then, MutationObserver 还是 setTimeout(fn, 0)），nextTick 机制帮不上忙，也干扰不到