浅谈Vue种的$nextTick机制

DOM循环更新

首先,Vue实例实现响应式并不是在数据改变之后就立即更新DOM,而是在一次循环的所有数据变化后再异步执行DOM更新

在这里简单总结一下事件循环

同步代码执行=>查找异步队列,进入执行栈,执行Callback1[事件循环1]=>查找异步队列,进入执行栈,执行Callback[事件循环2]=>…

即每一次异步的Callback都会再独立形成一次事件循环

因此我们可以推出nextTick的触发机制

一次循环种的所有代码执行完毕 = > DOM更新 = > 触发nextTick的回调Callback = > 进入下一次循环

下面来个例子,帮助更好的理解nextTick机制

{{content}}

在nextTick执行前获取内容:{{content1}}

在nextTick执行之后获取内容:{{content2}}

在nextTick执行前获取内容:{{content3}}

打开网页后,我们可以发现结果为:

After NextTick

在nextTick执行前获取内容:Before NextTick

在nextTick执行之后获取内容:After NextTick

在nextTick执行前获取内容:Before NextTick

总结:

首先是在changeContent方法中对content进行了更改

虽然content1和content3获取内容都是再content数据更改之后的,但是它们属于同一个事件循环,因此content1和content3获取的还是’ Before NextTick ', 而content2获取内容的语句写在nextTick的回调中,在DOM更新之后执行,所以能够获取到更新后的 ’ After NextTick ’

应用场景

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】