我理解的关于Vue.nextTick()的正确使用

YorkChen 发布于2019-08-20 14:46 / 842人阅读

摘要：在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的结构的时候，这个操作都应该放进的回调函数中。这样回调函数在更新完成后就会调用。

关于作者

程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。

个人网站：http://www.linganmin.cn

最近刚写了一个手机在线播放的H5电影站：http://www.ifilm.ltd

什么是Vue.nextTick()

官方文档解释如下：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM，获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题，所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码，比如Swiper扩展包的

var swiper = new Swiper(".swiper-container", {
                    pagination: ".swiper-pagination",
                    nextButton: ".swiper-button-next",
                    prevButton: ".swiper-button-prev",
                    paginationClickable: true,
                    spaceBetween: 30,
                    centeredSlides: true,
                    autoplay: 2500,
                    autoplayDisableOnInteraction: false
                });

什么时候需要用的Vue.nextTick()

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。

在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
当你设置 vm.someData = "new value"，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

安小下同学

云服务器 GPU云服务器以下关于弹性云服务器说法正确的是关于jdk的使用关于宏的使用关于使用linux的相关软件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81900.html

我理解的关于Vue.nextTick()的正确使用

摘要：在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的结构的时候，这个操作都应该放进的回调函数中。这样回调函数在更新完成后就会调用。关于作者程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。个人网站：http://www.linganmin.cn 最近刚写...

CHENGKANG 2019-08-01 16:26 评论0 收藏0
详细分析Vue.nextTick()实现

摘要：因为平时使用都是传回调的，所以很好奇什么情况下会为，去翻看官方文档发现起新增如果没有提供回调且在支持的环境中，则返回一个。这就对了，函数体内最后的判断很明显就是这个意思没有回调支持。 Firstly, this paper is based on Vue 2.6.8刚开始接触Vue的时候，哇nextTick好强，咋就在这里面写就是dom更新之后，当时连什么macrotask、micro...

DevYK 2019-08-26 13:40 评论0 收藏0
【Vue原理】NextTick - 源码版之独立自身

摘要：尽量把所有异步代码放在一个宏微任务中，减少消耗加快异步代码的执行。我们知道，如果一个异步代码就注册一个宏微任务的话，那么执行完全部异步代码肯定慢很多避免频繁地更新。中就算我们一次性修改多次数据，页面还是只会更新一次。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5...

刘东 2019-08-26 18:36 评论0 收藏0
Vue.nextTick 的原理和用途

摘要：在查询了各种资料后，总结了一下其原理和用途，如有错误，请不吝赐教。截取关键部分如下具体来说，异步执行的运行机制如下。知乎上的例子改变数据想要立即使用更新后的。需要注意的是，在和阶段，如果需要操作渲染后的试图，也要使用方法。对于 Vue.nextTick 方法，自己有些疑惑。在查询了各种资料后，总结了一下其原理和用途，如有错误，请不吝赐教。概览官方文档说明：用法：在下次 DO...

fevin 2019-08-22 13:51 评论0 收藏0