[vue] 你知道nextTick的原理吗?
Activity
persist-xyz commentedon Jul 3, 2019
用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
Vue官网
提到DOM的更新是异步执行的,只要数据发生变化,将会开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。
简单来说,就是当数据发生变化时,视图不会立即更新,而是等到同一事件循环中所有数据变化完成之后,再统一更新视图。
关于异步的解析,可以查看阮一峰老师的这篇文章,具体来说,异步执行的运行机制如下。
例子:
那么,Vue内部是如何实现的呢?
可以了解一下哇 NextTick - 源码版 之 独立自身
Myh-cs commentedon Jul 9, 2019
微任务与宏任务吧 ,完了根据浏览器的支持情况 promise setImmediate setTimeout 做退化
ZihaoChoi commentedon Aug 31, 2022
vue更新DOM是异步操作,等所有数据更新后才会渲染DOM。所以要在更新DOM会操作,vue提供了nextTick。nextTick方法在源码内会通过各种方法检测DOM是否更新完成。如果有promise.then就用promise监听,没有就降级成MutationObserver,还不支持就降级setImmediate,都不支持就用setTimeout