是什么
等待下一次dom更新刷新的工具方法(官方)
vue的异步更新策略
如果数据发生变化,Vue不会立刻更新dom,而是开启一个队列,把组件更新函数保存到队列里去。在同一事件循环中发生的所有数据变更会异步批量更新。这一策略导致我们对数据的修改不会立刻体现在DOM上。此时如果想要获取更新后的dom状态,就需要使用nextTick
具体使用
nextTick签名:function nextTick(callback?: () => void) Promise<void>
1、回调的方式使用
2、async await函数中,await nextTick()后是更新后的dom
场景
1、create钩子中dom并没有生成
2、响应数据变化后获取dom更新后的状态,如列表更新后的高度
原理
组件更新函数入队:
// 创建响应式副作用
const effect = (instance.effect = new ReactiveEffect(
conponentUpdateFn,//副作用即组件更新函数,按照参数2的方式执行
() => queueJob(update),//参数2
instance.scope
))
function queueJob(job) {
queue.push(job)// 把job放到数组中
queueFlush()//启动任务,刷新队列
}
function queueFlash() {
// 刷新函数flushJobs放到微任务的队列中,所有的同步代码都已经执行完了,才执行刷新函数
currentFlashPromise = resolvePromise.then(flushJobs)
// flushJobs函数的内容:循环遍历所有的组件更新函数
}
function nextTick() {
const p = resolvePromise
// fn将来会放到组件更新函数的后面去执行
return p.then(fn)
}