有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
一个前端开发人员(小智)走进了一个Vue酒吧。小智点了他最喜欢的鸡尾酒:Nuxt。酒保正在努力制作中。然后他自己就唠叨了起来。
小智讲述了他是如何在Vue 3的实例方法下发现$nextTick
的,并大吃一惊。小智
使用Vue已经有一段时间了,他已经习惯了把$watch
和$emit
写成实例方法。那么,$nextTick是用来做什么的?Vue文档说,它"[defers]回调,在下一个DOM更新周期后执行"。
但是小智并不相信。
他继续讲述他是如何尝试这样做的:
this.loadingAnimation = true
this.startVeryLongCalculation()
this.completeVeryLongCalculation()
this.loadingAnimation = false
有用。 为什么?
nextTick做什么?
nextTick
接受一个延迟到下一个DOM更新周期的回调函数。这只是Vue的一种说法,“嘿,如果你想在DOM更新后执行一个函数(这种情况很少发生),我希望你使用nextTick
而不是setTimeout
”。
Vue.nextTick(() => {}) // syntax
下面很快就会讲到setTimeout
和nextTick
参数。我们用这个例子来可视化nextTick
的行为:
{{ currentTime }}
在J电脑上运行这个代码片段。它将显示2021
年。并不是说如果你去掉nextTick
,就不会得到同样的结果。然而,你应该明白,Vue会根据数据中的内容对DOM进行修改。
在上面的代码片段中,Vue将DOM更新为3
,然后调用回调,将DOM更新为2021
,最后将控制权交给浏览器,浏览器将显示2021
。
到目前为止,我们已经研究了nextTick在回调队列中插入回调函数并在适当的时候执行该函数。
这个你可能会感兴趣,nextTick
中的回调是作为事件循环中的一个微任务使用的。nextTick
的源代码明确指出,“nextTick
行为利用了微任务队列,可以通过本地的Promise.then
或MutationObserver
来访问。”
setTimeout vs nextTick
在DOM更新后执行函数的另一种方法是使用JavaScript的setTimeout()
函数。
我们将上面的代码用setTimeout
替换nextTick
:
{{ currentTime }}
运行此代码片段。 首先看到3
然后2021
。它发生得很快,因此如果没有看到此行为,需要刷新浏览器。
在上面的代码片段中,Vue将DOM更新为3
,并提供浏览器控制。然后浏览器显示3
,调用回调函数,将DOM更新到2021
,最后将控制权交给浏览器,现在浏览器显示2021
。
nextTick
的实现在不支持Promise
和MutationObserver
的浏览器(IE 6-10和Opera Mini浏览器)上,使用setTimeout
作为后备方法,对于不支持Promise
和MutationObserver
的浏览器(IE 10),它更倾向于setImmediate
。
何时使用 nexttick
-
当你想使用
setTimeout
时 -
当你想确定DOM能反映你的数据时
-
在尝试执行异步操作时,遇到
Uncaught (in promise) DOMException
等错误。记住,Vue是异步更新DOM的
最后来个示例:
{{month}}
# 最后自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!**如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!