如何去理解vue中的$nextTick()并如何去使用

$nextTick()的作用:

        Vue首先是异步渲染的框架,data发生改变的时候DOM不会立即渲染,$nextTick()会在DOM渲染之后被触发,多次异步渲染$nextTick()只会执行最后一次的渲染结果,

$nextTick的原理

$nextTick主要通过事件循环中的任务队列的方式异步执行传入的回调函数,首先会判断当前的执行环境是否支持Promise,MutationObserver,setImmediate,setTimeout。如果支持则创建对应的异步方法,这里的MutationObserver并不是监听DOM,而是利用其微任务特性。需要注意的是更新DOM的方法也是通过nextTick进行调用的,因此就可以实现传入$.nextTick的回调函数在DOM渲染完成之后执行这些微任务。

用法:

在所有DOM更新完成后,才会执行$nextTick()里的回调函数

猜你喜欢

转载自blog.csdn.net/qq_25972233/article/details/125325172
今日推荐