Vue.nextTick如何使用


本篇内容介绍了“Vue.nextTick如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况免费云主机域名吧!希望大家仔细阅读,能够学有所成!你真的了解nextTick吗?来,直接上题~{{name}}请问上述代码中,当点击按钮“修改name”时,'nextTick1''sync log''nextTick2'对应的this.$refs.name.innerText分别会输出什么?注意,这里打印的是DOM的innerText~(文章结尾处会贴出答案)如果此时的你有非常坚定的答案,那你可以不用继续往下看了~但如果你对自己的答案有所顾虑,那不如跟着我,接着往下看。相信你看完,不需要看到答案都能有个肯定的答案了~!源码位于core/util/next-tick中。可以将其分为4个部分来看,直接上代码callbacks队列、pending状态遍历callbacks执行每个cb根据执行环境的支持程度采用不同的异步实现策略这里用个真实案例加深对MutationObserver的理解。毕竟比起其他三种异步方案,这个应该是大家最陌生的知道对应的输出会是怎么样的吗?script startscript end会在第一轮宏任务中执行,这点没问题setTimeout会被放入下一轮宏任务执行MutationObserver是微任务,所以会在本轮宏任务后执行,所以先于setTimeout结果如下图:cbPromise方式深入细节,理解pending有什么用,如何运作?案例1,同一轮Tick中执行2次$nextTicktimerFunc只会被执行一次用图看看更直观?这里如果有对Vue组件化、派发更新不是十分了解的朋友,可以先戳这里,看图解Vue响应式原理了解下Vue组件化和派发更新的相关内容再回来看噢~Vue的异步更新DOM其实也是使用nextTick来实现的,跟我们平时使用的$nextTick其实是同一个~这里我们回顾一下,当我们改变一个属性值的时候会发生什么?根据上图派发更新过程,我们从watcher.update开时讲起,以渲染Watcher为例,进入到queueWatcher里最后,一张图搞懂组件的异步更新过程如图所示,mounted时候的innerText是“井柏然”的中文接下来是点击按钮后,打印结果如图所示没错,输出结果如下(意不意外?惊不惊喜?)sync log 井柏然nextTick1 井柏然nextTick2 jngboran下面简单分析一下每个输出:sync log:这个同步打印没什么好说了,相信大部分童鞋的疑问点都不在这里。如果不清楚的童鞋可以先回顾一下EventLoop,这里不多赘述了~nextTick1:注意其虽然是放在$nextTick的回调中,在下一个tick执行,但是他的位置是在this.name = 'jngboran'的前。也就是说,他的cb会比App组件的派发更新(flushSchedulerQueue)更先进入队列,当nextTick1打印时,App组件还未派发更新,所以拿到的还是旧的DOM值。nextTick2就不展开了,大家可以自行分析一下。相信大家对它应该是最肯定的,我们平时不就是这样拿到更新后的DOM吗?最后来一张图加深理解“Vue.nextTick如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站,小编将为大家输出更多高质量的实用文章!

相关推荐: python中怎么用logging日志

这篇文章主要介绍“python中怎么用logging日志”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“python中怎么用logging日志”文章能帮助大家解决问题。main.pylogger/logger.py1、云…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 04/01 13:14
下一篇 04/01 13:14

相关推荐