你理解Vue.nextTick了嘛，不确定进来看看~对Vue.nextTick的理解一直感觉不是很到位，自己也有一些

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

对Vue.nextTick的理解一直感觉不是很到位，自己也有一些疑惑，知道看了几篇文章，明朗了一些，总结一下他的原理和用途。如果你在参看过程中，有不同的理解，欢迎讨论。

Vue.nextTick知识点

用法：Vue.nextTick([callback,context])；参数说明：

{Function} [callback]：回调函数，不传时提供promise调用；

{Object} [context]：回调函数执行的上下文环境，不传默认是自动绑定到调用它的实例上；

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
  ...   //DOM操作
})

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

Vue.nextTick的实现原理

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

具体来说，异步执行的运行机制如下。

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。（4）主线程不断重复上面的第三步。

例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

下面是主线程和任务队列执行流程图

简单理解，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

事件循环：

第一个 tick（图例中第一个步骤，即'本次更新循环'）：

首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及 DOM 。 Vue 开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

第二个 tick（图例中第二个步骤，即'下次更新循环'）：

同步任务执行完毕，开始执行异步 watcher 队列的任务，更新 DOM 。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel 方法，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

第三个 tick（图例中第三个步骤）：

此时就是文档所说的

下次 DOM 更新循环结束之后

此时通过 Vue.nextTick 获取到改变后的 DOM 。通过 setTimeout(fn, 0) 也可以同样获取到。

简单总结

同步代码执行 -> 查找异步队列，推入执行栈，执行Vue.nextTick[事件循环1] ->查找异步队列，推入执行栈，执行Vue.nextTick[事件循环2]...

总之，异步是单独的一个tick，不会和同步在一个 tick 里发生，也是 DOM 不会马上改变的原因。

nextTick的使用场景

1.在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
2.在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。
3.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
例如，当你设置vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

需要在视图更新之后，基于新的视图进行操作。

created、mounted

需要注意的是，在 created 和 mounted 阶段，如果需要操作渲染后的视图，也要使用 nextTick 方法。

官方文档说明：

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

 mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

场景一：如果要在created钩子函数中操作DOM需要放在Vue.nextTick()回调函数中执行；

<template>
  <div>
    <h3 ref="title">Hello World!</h3>
  </div>
</template>

<script>
  export default {
    created() {
      console.log('created');
      console.log(this.$refs.title)
      this.$nextTick(() => {
        console.log('created-nextTick');
        console.log(this.$refs.title)
      })
    },
    mounted() {
      console.log('mounted');
      console.log(this.$refs.title)
      this.$nextTick(() => {
        console.log('mounted-nextTick');
        console.log(this.$refs.title)
      })
    }
  }
</script>

根据输出值的顺序，可以发现在created()钩子函数执行时DOM并没有进行渲染，此时要是操作DOM并没有任何作用，而如果created里使用了nextTick后是可以获取到DOM对象的。由于mounted()钩子函数执行时已经完成了DOM的挂载和渲染，所以此时去操作DOM是没有任何问题的。 场景二：当数据变化后，我们希望拿到修改数据后的DOM结构去做某些操作时也需要放到Vue.nextTick()回调函数中。

<template>
  <div>
    <h3 ref="title">{{msg}}</h3>
    <el-button @click="changeMsg">Click</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'hello'
      }
    },
    methods: {
      changeMsg() {
        this.msg = 'changed';
        console.log(this.msg);               //顺序1：changed
        console.log(this.$refs.title.innerHTML)      //顺序2：hello
        this.$nextTick(() => {
          console.log(this.$refs.title.innerHTML)     //顺序4：changed
        })
        console.log(this.$refs.title.innerHTML)       //顺序3：hello
      }
    }
  }
</script>

通过执行结果我们发现，修改数据后数据值立马修改了，但是所对应的DOM并没有及时更新，nextTick通过一定的策略去更新DOM，接下来我们看看它的实现原理。

前端路漫漫其修远兮，吾将上下而求索，一起加油，学习前端吧

欢迎留言讨论~*

你理解Vue.nextTick了嘛 ，不确定进来看看~