vue的$nextTick的使用+源码分析

vue的$nextTick的使用+源码分析
开始前，我觉得我们需要先弄清楚vue的$nextTick是干什么用的，它的存在是为了解决什么问题？大家也可以自问一下。

nextTick英文翻译过来“下一个记号或者标记”，我觉得这里应该用状态来描述更加合理一些。

上面，我抛了一个问题，现在来聊一聊这个问题，首先说一说nextTick的作用，这里我就直接引用官网api上的一句话，我觉得已经说的非常清楚了：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

再看一下官网的例子：

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改数据
      this.message = 'changed'
      // DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
      })
    }
  }
})
上面我用了官网的例子和解释，我觉得例子还没完全说明白nextTick解决了什么样的问题，所以我觉得我需要补充一下我自己的理解。
大家都知道，在vue的created生命周期里面，如果你需要在这个生命周期钩子里面操作dom是不行的，因为这个钩子执行的时候dom并没有渲染到页面上，所以会直接报错。
这里有的同学就说，如果我必须要在这里操作dom呢？那这个时候就到了$nextTick登场的时候，根据官方的解释和例子也可以证明这一点，nextTick的参数回调函数执行的时候就是dom已经渲染到了页面，挂载好了，并且把当前this绑定到了当前的实例上面去了，这个时候就可以获取到更新后的dom元素去操作dom。
其实真正的用意，并不是为了解决这个，其实是为了解决响应式更新的问题。
我们都知道，vue是响应式的，什么是响应式？简单说，就是数据变了，视图变，视图变了，数据变。这样一来就有一个问题，不知道大家发现了没，如果没发现，我们就先看一下下面这段代码

<template>
  <div>
    { {a}}
    { {b}}
    { {c}}
  </div>
</template>
new Vue({