如何简单理解vue的NextTick

它干啥的?

nextTick 中文意思:下一个敲击点。由于vue的响应式是异步的,那么当我们想在所有组件渲染结束后做一下"自己的事情",所以就有了nextTick这个方法。这也就弥补了有一种情况mounted这个生命周期钩子满足不了需求,比如在子组件种操作父组件的dom,子组价的mounted就使不上劲啦。

核心是啥?

1.利用js的事件循环机制,2.源码主要判断当前设备环境支持的异步方法,将回调函数放入数组中,当vue渲染结束,依次执行数组中存放的事件。

解释一下上面的知识点:

① JS 事件循环机制

由于JS是单线程应用,所以按常理代码应该是自上到下依次执行。可是呢实际情况中会遇到异步的情况,比如开了一个定时器,请求了一个接口等。遇到这种情况,JS会把这些事件先放到一个地方存起来。后面继续执行任务,如果再遇到异步任务再存起来,等到从上到下的任务都执行结束,再依次执行存储的异步任务。 异步任务分为宏任务和微任务。放入不同的地方存起来,执行顺序是先微任务再宏任务。

那"循环"体现在哪?

循环就是:当发现当线程的执行的任务结束,如果没有宏任务,取出队列的异步任务执行,然后再走到"当发现当线程的执行的任务结束"。循环至队列中的异步任务结束。

网上下的图,侵权必删

② 方法逻辑和核心源码

逻辑:主要逻辑就是由于js的事件循环机制,当我们想在dom渲染结束之后做一些事情,那么声明一个方法,把要做事情当做参数,然后创建异步任务,利用事件循环再执行那些事情。

核心源码:nextTick 方法参数是一个函数,把这个函数放入callbacks 数组中,优雅降等级判断设备支持的异步方法。优先级为:promise > MutationObserver > setImmediate>setTimout()。flushCallbacks利用当前支持的异步方法执行nextTick存储的任务,

相关推荐
可乐鸡翅yeah_35 分钟前
FFmpeg 生成 HLS 独立分片 independent‑segments 参数到底有什么用
javascript·ffmpeg·音视频·safari·m3u8
福兮说39 分钟前
canvas 旋转图片的六个坑:四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了
前端·javascript·图像处理·canvas
Ai-_Man2 小时前
您您这可以把Grok的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑
传人once2 小时前
多图片上传预览功能如何写
前端·css·html·jquery·html5
Eric.463 小时前
Wan‑Animate+MiniMax-H3 本地部署 AI 漫剧流水线:8G 显存动作迁移与动态分镜工程实战
前端·人工智能·comfyui·ai漫剧
liangshanbo12153 小时前
JavaScript 异步核心主线
javascript·事件循环·异步操作
传人once4 小时前
悬停旋转放大和位移效果如何写
javascript·css·动画
库拉镜像AI牛牛4 小时前
短剧内容自动化生产:知漫剧工作室落地教程
大数据·服务器·前端·人工智能·语音识别
律宏阔4 小时前
Flutter 列表图片内存优化:CachedNetworkImage 与 ClipRRect 的取舍
前端·flutter
行者全栈架构师4 小时前
【鸿蒙心迹】相册文搜图工程化落地:HarmonyOS 7.0 端侧 AI 检索全链路实战与 5 个踩坑解法
前端