vue $nextTick实现原理深入详解
简介
鉴于一些朋友想学习 vue2 源码,但一看到源码就头痛(比如在下...),这里本着能给别人讲会,自己就能学会的态度,想开一个专题,旨在用最简单的代码 让感兴趣的朋友了解一些源码的设计思路(重在思路)。当然受限于在下技术水平,若有歧义或不正确的地方还望大佬们及时指正。
这一节主要讲一下$nextTick 如何实现的
nextTick 的作用
我们看一下这一段代码
当我们进入页面后 根据双向绑定原理(当然我们还没讲,如果这个文章反应好后面会补上)的知识 num 每次执行++ 时,其 setter 方法都会执行一次,而每次执行 setter 时,都会触发 watcher 的更新 dom 方法,那执行下来,dom 就会被更新 10000 次,很明显这样就太低效了。
经过简单思考我们就可以想到,虽然 num 被更新了 10000 次,但我们实际只想在最后一次更新后,执行 dom 的更新,那就意味着想要提升性能,dom 更新就不能是同步的,而应该等每次代码执行完毕后,把所有收集到的 watcher 进行去重,如演示代码中,应该在每次执行 num 的 setter 后,先把触发的 watcher 存入队列,等代码执行完毕后,对收集到的 watcher 进行去重,这里就只保留最后一次的 watcher 更新 dom 即可。
nextTick 的简单实现
解析
- (1)首先,nextTick 函数将回调函数封装在一个新的函数中,并将该封装函数推入 callbacks 数组中。
- (2)然后,它会检查 pending 的状态,如果为 false,则表示当前没有执行异步更新任务,需要进行异步更新。
- (3)在异步更新中,它会根据浏览器支持情况选择使用宏任务(macro task)或微任务(micro task)。
如果浏览器支持宏任务,macroTimerFunc 函数会被调用,将异步更新任务推入宏任务队列中,以便在下一个宏任务执行时执行回调函数。
如果浏览器不支持宏任务,则会调用 microTimerFunc 函数,将异步更新任务推入微任务队列中,以便在下一个微任务执行时执行回调函数。 - (4)最后,如果回调函数为 undefined,并且当前环境支持 Promise,则会返回一个 Promise 对象,以便可以使用 await 或 .then() 等方式等待回调函数执行完成。
以上就是vue $nextTick实现原理深入详解的详细内容,更多关于vue $nextTick实现的资料请关注脚本之家其它相关文章!
相关文章
VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)
使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息,下面这篇文章主要给大家介绍了关于VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)的相关资料,需要的朋友可以参考下2023-04-04Vue中对watch的理解(关键是immediate和deep属性)
watch侦听器,是Vue实例的一个属性,是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,这篇文章主要介绍了Vue中对watch的理解,需要的朋友可以参考下2022-11-11vue draggable resizable 实现可拖拽缩放的组件功能
这篇文章主要介绍了vue draggable resizable 实现可拖拽缩放的组件功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
最新评论