一:nextTick是什么?
官方的定义:在下次Dom更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的DOM。 vue在更新DOM时是异步执行的,当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新。
vue中,数据在发现变化的时候,不会立即去更新Dom,而是将修改数据的操作放在一个异步操作队列中 如果我们一直修改相同数据,异步操作队列还会进行去重 等待同一事件循环中的所有数据变化完成之后,会将队列中的事件拿来进行处理,进行Dom的更新
二:为什么要有nexttick
对一个值进行10万次数据修改,如果没有nexttick,每次更新修改都会触发视图更新,有了nexttick机制,就只需要更新一次,所以nextTick本质是一种优化策略。
三:使用场景
如果想要在修改数据之后,立即得到更新后的Dom结构,可以使用vue.nextTick()
四:小结
1,将回调函数放入callbacks等待执行 2,将执行函数放到微任务或者宏任务中 3,事件循环到了微任务或者宏任务,执行函数依次执行callbacks中的回调