Vue 异步更新, 同一事件循环 如何理解?(语言-javascript)

可能你还没有注意到,Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。

img

先了解 事件循环

一.事件循环
    事件循环,是浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务而制定的一套工作机制,它约束了各种任务的执行顺序。

二.同步任务与异步任务
    JavaScript是单线程的,因此所有的任务都要排队执行。为了避免某些任务过于耗时而影响整体性能因此任务有同步和异步之分。同步任务按顺序执行,而异步任务的执行顺序则不一定是代码书写的顺序
一.事件循环
    事件循环,是浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务而制定的一套工作机制,它约束了各种任务的执行顺序。

二.同步任务与异步任务
    JavaScript是单线程的,因此所有的任务都要排队执行。为了避免某些任务过于耗时而影响整体性能因此任务有同步和异步之分。同步任务按顺序执行,而异步任务的执行顺序则不一定是代码书写的顺序

img

假设10秒钟内同一数据更新了5次,在第一次更新时放入队列,第二次更新时放入队列,以此类推。假设一个事件循环需要的时间为5秒(实际上要小的多,毫秒甚至纳秒级的),则一个事件循环内有两次更新最终更新为第二次变更的,在下一个事件循环时队列中有三次更新,最后更新为第5次更新的数据。

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632