Vue—nextTick的实现原理

使用nextTick

全局使用：

// DOM 还没有更新
Vue.nextTick(function () {
   
  // DOM 更新了
})

// 作为一个 Promise 使用
Vue.nextTick().then(function () {
   
    // DOM 更新了
})

实例方法：

new Vue({
   
  // ...
  methods: {
   
    // ...
    example: function () {
   
      // 修改数据
      this.message = 'changed'
      // DOM 还没有更新
      this.$nextTick(function () {
   
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
      })
    }
  }
})

//全局方法
Vue.nextTick = nextTick;
//实例方法
Vue.prototype.$nextTick = function (fn) {
   
    return nextTick(fn, this)
  }