启用javascript(怎么启用javascript)
成龙/经典/动作/喜剧电影:龙少爷点击链接直接打开查看图片
悬疑/犯罪电影:致命追捕点击链接直接打开查看图片
跨越2020年所有的成功,迈向2021年的牛气冲天! 【抖音】记录美好生活-Douyin.com 复制此链接,打开抖音搜索,直接观看视频!
JS脸打得啪啪响,预售开启几个小时了,0件已预定,呵呵~ 何必死扛呢?消费者的钱又不是大风刮来的,强行加价1000大几还搞什么限时预售,这戏码演给谁看呢[摊手]
今天小菜在撸码的时候发现前端代码里面有一个this.$nextTick方法,疑问起来这个这个东东有什么用,就跑过来问我,由于我们的前端使用的是vue,作为老一辈的程序员,经历过原生js、jquery时代,犹记当年的dwr+extjs在后台系统操作的贼溜,可如今dwr早已经停更多年了,估计好多新人都没听过dwr,言归正传,接触vue也有一阵子,来这个公司之前都没有用过vue[捂脸][捂脸][捂脸],作为一名小公司的程序员,不管前端后端数据库还是运维网络,都是要稍微懂一点的。
这个在前端面试题中也是出现的频率挺高的,有前端的朋友说去面试经常被问到,作为一条有追求咸鱼的后端,也是为了满足小菜的疑问,也去了解了一下这个用法。
功能:相信对前端稍微熟悉的人都知道它是用来将回调延迟到下次 DOM 更新循环之后执行,官方是这样描述的:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
原因:这里就涉及到Vue中对DOM的更新策略了,Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个事件队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到事件队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新事件队列并执行实际 (已去重的) 工作
原理:首先vue会进行能力检测,Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替 ,其实可以从这里看到写框架的都会做好多判断,而且还会分为宏任务与微任务:
宏任务(macro task) 有 setTimeout、MessageChannel、postMessage、setImmediate;
微任务(micro task)有MutationObsever 和 Promise.then
更多深层次的原理可能要自行查阅源码理解了,随着版本的变化也会有一些调整,我们要学习得是别人写框架的思维方式而不是为了面试死记硬背一些概念。
我是@码农阿三 ,欢迎关注我,了解更多的IT知识!
#程序员#





