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({