vue.nextTick()和this.$nextTick()获

一.对vue.nextTick()和this.$nextTick()细致介绍

     虽然vue是不建议操作dom的，但有时候我们又必须对dom进行相应的操作。通过给组件或者页面元素绑定ref属性，我们可以在vue实例中获取到dom。vue是双向数据绑定的，数据可以驱动视图的更新，但是数据发生改变之后dom并不是立即发生改变的，而是按照一定的策略进行dom的更新。有时候我们就需要对更新后的dom元素进行相应的操作，但我们直接获取到的dom是更新之前的dom，这个时vue.nextTick()就起到作用了，在这个方法的回调函数中我们可以获取到最新的dom。

       通过上面的描述我们再来看一下vue官方给出的定义就比较好理解了，“下次dom更新循环结束后执行延迟回调，在修改数据之后，立即使用这个方法，获取更新后的dom”。

       放在vue.nextTick()回调函数中的执行的一般就是对更新的dom元素进行相应操作的js代码。vue.nextTick()是全局的，this.$nextTick()是局部的写在vue实例里面的。类似于全局指令和局部指令。

二.vue.nextTick()和this.$nextTick()实现的核心

      es6中的promise不只是解决了嵌套地狱这个难题，还有一个作用就是实现异步，vue.nextTick()和this.$nextTick()的核心就是使用promise来实现异步，获取到更新后的dom，vue.nextTick()和this.$nextTick()返回的是一个promise对象。那么就可以直接在这个api后面接then()或者catch(）

下面来个小demo来说明一下：

疑问点：在我写这个小demo的时候，不仅在回调里面和外面都打印了原始数据和最新数据，我还打印了dom，结果打印的dom都是更新之后的dom，不太明白，如果有知道原因的，麻烦下方评论给我指出。

三.应用场景

最后来讲一下哪些场景我们会用到这个api

1.在created生命周期中，有时候也会对dom进行相关的操作，这个时候页面上面的dom并没有渲染，我们知道操作页面dom最早的时期就是在mounted生命周期，所以在created生命周期里面操作dom必须是在vue.nextTick()里面。

2.数据更新的时候，我们需要获取数据更新之后的dom元素，那么也是在vue.nextTick()中进行操作

基本上需要使用到这个api的就是这两个场景