api-nextTick

是什么

等待下一次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)
}