作用
将回调推迟到下一个DOM更新周期之后执行。在更改了一些数据以等待DOM 更新后立即使用它。
vue在更新DOM时是异步执行的,本质是执行延迟回调的钩子，接受一个回调函数作为参数，在下次DOM更新循环结束之后执行延迟回调。当数据发生变化，VUE将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，统一进行更新。
为什么异步
只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。在缓冲时去除重复数据避免不必要的计算和dom操作。
代码
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id='app'>
<p ref='p'>{{msg}}</p>
<span @click='fn'>click me</span>
</div>
span{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
new Vue({
el:'#app',
data:{
msg:'hi'
},
methods:{
fn(){
this.msg='the lastest msg'
// console.log(this.$refs['p'].innerHTML)
this.$nextTick(()=>{
console.log(this.$refs['p'].innerHTML)
})
}
}
})
为什么要有nextTick
如果没有nextTick更新机制，数据每次更新都会触发视图更新，有nextTick机制，只需要更新一次，nextTick本质是一种优化策略。
原理
callbacks就是异步操作队列。callbacks（异步操作队列）新增回调函数后又执行了timerFunc函数，pending是用来标识同一个时间只能执行一次。利用Event loop事件线程去异步操作
除了nexttick还有什么手段可以实现类似的效果
场景
想在修改数据后立刻得到更新后的DOM 结构。
