Vue.js中this.$nextTick()的理解和使用

Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

官方文档这样解析

nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用 $nextTick，则可以在回调中获取更新后的 DOM

API 文档中官方示例如下：

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // modify data
      this.message = 'changed'
      // DOM is not updated yet
      this.$nextTick(function () {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }

比如在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

再看下面这个例子

Vue.component('example', {
  template: '{{ message }}',
  data: function () {
    return {
      message: 'not updated'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = 'updated'
      console.[log](http://www.php.net/log)(this.$el.textContent) // => 'not updated'
      this.$nextTick(function () {
        console.[log](http://www.php.net/log)(this.$el.textContent) // => 'updated'
      })
    }
  }
}

可以这样理解
其实这个东西就是为了更好的拿到DOM最新节点，比如有一个基于jquery的插件，在每次视图更新之后去执行这个jq的方法，那就需要这个钩子回调，需要注意的 , updata针对某个组件整体渲染进行的生命周期钩子，如果没有去切换更新组件，只是通过事件改变了某处组件中的UI，此时updata自然是不会执行，此时就可以用到this.$nextTick

总结

<1> nextTick()中的代码会在DOM更新后执行
<2> this.$nextTick()在DOM更新循环之后执行延迟回调，在修改数据之后使用这个方法可以获取更新后的DOM

  
    
    
    
    
  
  
    

      
{{msg}}
      点击改变
    
    
  

理解this.$nextTick()的使用场景

this.nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$nextTick()就会被大量使用，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。

  
{{msg}}
  
Message got outside $nextTick: {{msg1}}
  
Message got inside $nextTick: {{msg2}}
  
Message got outside $nextTick: {{msg3}}
  
    Change the Message
  

 
 
new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue.',
    msg1: '',
    msg2: '',
    msg3: ''
  },
  methods: {
    changeMsg() {
      this.msg = "Hello world."
      this.msg1 = this.$refs.msgDiv.innerHTML
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML
      })
      this.msg3 = this.$refs.msgDiv.innerHTML
    }
  }
})

image.png

从上图可知，vue中的msg1和msg3显示的数据还是赋值之前的，msg2显示的数据则是赋值之后的。其根本原因是vue中的dom渲染是异步的。
根据上面的例子可以看出，如果在方法里直接打印console.log(this.msg)的话， 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值(还是Hello Vue)，而通过this.$nextTick()获取到的值为dom更新之后的值(Hello world)
(结合这篇文章容易理解)
https://www.cnblogs.com/jin-zhe/p/9985436.html

下面这个例子更加直观说明和理解

// 修改数据
this.message='changed'
console.log(this.$el.textContent)
// 输出的是原message的数据，因为重新设置message后，DOM还没有更新

Vue.nextTick*(function(){
    console.log(this.$el.textContent)
    // 输出得到'changed'，nextTick()中的代码会在DOM更新后执行
}

更深入的理解

官方网站这么说的：

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

Dom的更新是异步的，也就是在数据变化之后，dom不会立即更新，而是进入队列，等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。关于异步执行队列的可以查看另一篇博客https://blog.csdn.net/qq_33505829/article/details/86221834

所以，有一段时间是获取不到的最新的Dom的。因此，this.$nextTick()的回调函数可以，执行一些，在Dom更新完毕之后，才执行的操作。

看下面的代码：

image.png

事件循环：

首先给this.message 赋值，这一轮循环中，赋值操作属于同步任务，直接进入主线程，赋值完毕，要根据数据变化来更新Dom，前面说了 vue 的dom更新是异步的，所以，这一步会放到异步队列中，vue会把这轮循环的数据变化都缓存起来，等待同步任务自行完毕，再来执行队列里面的任务。

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

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

总结：

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

使用场景：

1.create（）生命周期中，如果要对Dom 进行操作，一定要使用nextTick，因为在此生命周期中，数据虽然已经赋值完毕，但Dom还未渲染。
在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象。

2. 如果是在动态添加的模块中，对 Dom进行操作，比如获取节点什么的(比如echarts结合tab使用的时)，也要使用这个nextTick。
   this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势 , echarts就是典型的使用场景。

此篇文章也可以读读
https://www.jb51.net/article/179422.htm