简单易懂 关于nextTick()的理解

简单易懂 关于nextTick()的理解,第1张

前言

学习Vue的过程中,大家肯定都使用过nextTick(),关于nextTick()的使用时机,大家肯定都知道,那么它的工作原理是怎样的呢,本文就简单说一下它的nextTick()的工作原理。

nextTick的使用时机

首先记住:nextTick所指定的回调会在浏览器更新DOM完毕之后再执行。

举个例子:

在我自己做的一个单页面应用中,我有一个需求,当从后端请求回数据后,马上就对页面进行更新。比如,我要点击 *** 作里的删除 *** 作,前端删除数据后就向后端发请求,后端删除数据后返回数据,如果我们想马上显示到页面上,应该怎么做呢?

可能好多人会像我第一次做那样,比如我这个页面是用 v-for 遍历data这个数据显示出来的,可能好多人就会直接把前端返回的数据直接重新赋值给data。但是这样是绝对不行的!这样只会导致数据其实是变了,但是视图是不会变的,因为vue更新dom是异步的,无法通过同步代码赋值后马上去更新页面。所以即使删除成功了页面也不会显示出来。即使显示删除成功,页面也不会更新。

如何更新

我们的需求是,请求回数据后马上更新页面,首先理解几个点。

1、vue更新Dom是异步更新。

如图官网的描述,解释一下这段话,直接看可能有些懵,前两句话,关于同步和异步,以及提到的"事件循环",这就要从JS的运行机制说起,戳这里前往。第三句话,“如果同一个 watcher 被多次触发,只会被推入到队列中一次”,这是什么意思呢,也在我的文章中可找到,戳我前往

2、理解执行时机

读完上面两篇文章,大家应该就知道宏任务和微任务了把,而nextTick内部就是调用宏任务和微任务来完成事件调用的机制,让nextTick里的回调在一个事件循环的最后执行。为什么要在最后呢?在最后即意味着在所有异步任务之后,记得上一点吗,“vue更新Dom是异步更新”,而我们又把nextTick里的回调放在了所有异步任务的最后,这样就解释了最开始那句话,nextTick所指定的回调会在浏览器更新DOM完毕之后再执行。

3、回到例子实现需求

我们想要实现需求,本例我们采用热更新,即只更新局部组件。

我直接把我的子组件全放在router-view里的,通过变化v-if来实现组件更新。

看到这里可能有人会问,这不就是先把v-if设为false,再设置为true来实现吗,要不要nextTick都一样,那么这样想就大错特错了。

还记得刚才说的“如果同一个 watcher 被多次触发,只会被推入到队列中一次”,那篇文章已经解释过了,vue会把所有代码都执行了再去渲染页面,所以我们这两条this.$isRouterAlive = false 和 this.$isRouterAlive = true,相当于只执行了最后一条等于true,false都没执行过,所以相当于还是什么都没做,原始是true,现在还是true。

加了个nextTick就不一样了,这段代码就相当于告诉vue,vue你先帮我执行 this.$isRouterAlive = false,先不要管我nextTick里的东西,你去渲染完了最后再来执行我nextTick里的代码。

这样一说大家是不是就比较明白了,this.$isRouterAlive = true 是在页面渲染过后 再执行的,所以我们肉眼看其实已删除货物,页面马上就更新了,其实其中经过了先把router-view里的子组件取消掉,即v-if = false,然后再让 v-if = true,那么v-if大家都知道就是创建,相当于router-view里的内容被重新创建了,所以此时的数据也是最新的。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1296262.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存