Vue中的nextTick用法和原理详解 3

VUE 数据发生变化后,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次
在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用
主线程完成后会立即执行nextTick,再执行等待队列,也就是说nextTick会被放在主线程最后,等待队列之前,而setTimeout会被放在等待队列的最后

DOM渲染是需要时间的 所以就应证了详解1中 为什么msg1和msg2 没有改变  因为在ref获取时DOM还没把更新后的数据渲染到页面上,DOM渲染的时间时不确定的,如果写多个ref赋值可能就会msg1的值被改变

窗竹影摇书案上,野泉声入砚池中。 少年辛苦终身事,莫向光阴惰寸功
原文地址:https://www.cnblogs.com/qhantime/p/11379878.html