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

最新推荐文章于 2023-07-20 14:51:20 发布

IT邦少

最新推荐文章于 2023-07-20 14:51:20 发布

阅读量186

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_25972233/article/details/125325172

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

$nextTick()的作用:

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

$nextTick的原理

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