this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。
nextTick的由来：由于VUE的数据驱动视图更新，是异步的，即修改数据的当下，视图不会立刻更新，而是等同一事件中的所有数据变化完成之后，再统一进行视图更新。
nextTick的触发时机：在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调。
应用场景：需要在视图更新之后，基于新的视图进行操作。
以上出现了事件循环的概念，其涉及到JS的运行机制，包括主线程的执行栈、异步队列、异步API、时间循环的写作。大致可以理解为：主线程完成同步环境执行，查询任务队列，提取队首的任务，放入主线程中执行；执行完毕，再重复该操作，该过程称为事件循环。而主线程的每次读取任务队列操作，是一个事件循环的开始。异步callback不可能处在同一事件循环中。
简单总结事件循环：同步代码执行→查找异步队列，推入执行栈，执行callback[事件循环1]→查找异步队列，推入执行栈，执行callback2[事件循环2]...
即每个异步callback，最终都会形成自己独立的一个事件循环。
结合nextTick的由来，可以推出每个事件循环中，nextTick触发的时机：同一事件循环中的代码执行完毕→DOM更新→nextTick callback触发。
ps:上文中的任务队列、消息队列、异步队列指向同一个东西，均指macrotask queue。
用法：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。
- 在Vue生命周期的
created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
- 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进
Vue.nextTick()的回调函数中
Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nextTick</title> <script src="./js/vue.min.js"></script> </head> <body> <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message got outside 1 $nextTick: {{msg1}}</div> <div v-if="msg2">Message got inside 2 $nextTick: {{msg2}}</div> <div v-if="msg3">Message got outside 3 $nextTick: {{msg3}}</div> <button @click="changeMsg"> Change the Message </button> </div> <script> 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 } } }) </script> </body> </html>
msg1和msg3显示的内容还是变换之前的，而msg2显示的内容是变换之后的。其根本原因是因为Vue中DOM更新是异步的
需要注意的是，在 created 和 mounted 阶段，如果需要操作渲染后的试图，也要使用 nextTick 方法。
官方文档说明：
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
https://segmentfault.com/a/1190000012861862
思否参考↑