nextTick理解

nexttick——下一次DOM更新后执行
可类比eventloop

DOM更新本身不是异步操作,Vue为了让dom更新不去频繁触发影响性能,做了个优化处理,累计更新,不实时更新;
当数据发生改变,依赖记录数据变化,生成一个函数去更新DOM,并把这个函数push进一个任务队列;并在下一个微任务(可能是微任务也可能是红任务,具体看浏览器支持情况)中执行所有的队列函数,每执行完毕一个函数,就删除一个函数;
forceUpdate可进行vue强制更新,此时会去队列中执行函数,每执行完毕一个函数,就删除一个函数;这样的好处是后续Promise.then()执行了,内部函数队列为空,也无大碍

刚说nextTick是下一个微任务,这句话不够严谨,因为查看vue代码中对于nextTick的实现,是首先使用promise,如浏览器不支持,会使用其他的方式去实现nexttick;具体顺序是:原生promise——原生MutationObserver——原生setImmediate——setTimeout

posted @ 2022-09-15 10:59  Math点PI  阅读(52)  评论(0)    收藏  举报