官方定义：在下次DOM更新循环结束后执行延迟回调，在修改数据之后立刻使用这个方法，获取更新后的DOM
可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在 发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替
解读：Vue在更新DOM时是异步执行的（ ），当数据发生变化，vue会开启一个异步更新队列，师徒需要等待队列中所有数据变化完成之后再统一进行更新，一个例子
<div id="app"> {{ message }} </div>
const vm = new Vue({
el: '#app',
data: {
message: 'current'
},
changeData(){
this.message = 'change1'
this.message = 'change2'
this.message = 'change3'
console.log(vm.$el.textContent) // current
}
})
这是因为message变化时， vue不会立刻更新DOM，而是将修改数据的操作放在一个异步操作队列中，如果一直修改相同的数据，异步操作还会去重。
等待同一事件循环中的所有数据变化完成占比后，会将队列中的事件拿来进行处理，进行DOM的更新
上述例子以及下面场景举例中的两个例子，出现问题的情况都是，在给data赋值时候立马去查看了数据导致的。“查看数据”这个动作是同步操作，并且都是在赋值之后，因此，我们猜测，并且结合官网，我们发现，给数据赋值操作是一个异步操作，并没有马上执行，
为什么要有nexttick机制
防止每次改变值的时候，都会触发试图更新，所以他本质是一种优化策略。
使用场景
想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick。第一个参数是回调函数，第二个参数是执行函数上下文
// 修改数据
vm.message = '修改后的值'
// DOM 还没有更新
console.log(vm.$el.textContent) // 原始的值
Vue.nextTick(function () { // 组件内使用this.$nextTick()，回调函数中的this将自动绑定到当前vue实例上
// DOM 更新了
console.log(vm.$el.textContent) // 修改后的值
})
场景举例
1、文字的行数来显示展开更多的一个按钮，在Vue中给数据赋值之后需要获取文字高度：
<div id="app">
<div class="msg">
{{msg}}
</div>
</div>
new Vue({
el: '#app',
data: function(){
return {
msg: ''
}
},
mounted(){
this.msg = '我是测试文字'
console.log(document.querySelector('.msg').offsetHeight) //0
}
})
2、父子组件传参：给子组件传参数后，在子组件中调用函数查看参数
<div id="app">
<div class="msg">
<form-report ref="child" :name="childName"></form-report>
</div>
</div>
Vue.component('form-report', {
props: ['name'],
methods: {
showName(){
console.log('子组件name：'+this.name)
}
},
template: '<div>{{name}}</div>'
})
new Vue({
el: '#app',
data: function(){
return {
childName: '',
}
},
mounted(){
this.childName = '我是子组件名字'
this.$refs.child.showName()
}
})
返回值
$nextTick返回的是一个Promise对象，可以用async/await
this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
await this.$nextTick()
console.log(this.$el.textContent) // => '修改后的值'
实现原理
其他解读
引自：https://juejin.cn/post/6844903906858795015
js的运行机制
js的执行是单线程，基于事件循环（event loop），事件循环大致分为以下几个步骤：
1、所有的任务都会被放到调用栈（call-stack）等待主线程（main thread）执行,主线程的执行过程就是一个 tick。
2、JS调用栈采用的是后进先出的规则，当函数执行的时候，会被添加到栈的顶部，当执行栈执行完成后，就会从栈顶移出，直到栈内被清空。
3、同步任务会在调用栈中按照顺序等待主线程依次执行，异步任务会在异步任务有了结果后，将注册的回调函数放入任务队列中等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。
4、任务队列（Task Queue）是一种先进先出的数据结构
有一个问题，“主线程的执行过程就是一个 tick”这句话的意思，是不是说，主线程每执行一个任务，就是一个tick，就会触发dom更新？？？如果这样的话，连续赋值，只会取最后一个赋的值这个是什么机制呢，是不是每次tick内会检查对一个变量的重复赋值，然后取最后一个
