关于Vue.nextTick()的正确使用方法浅析


Posted in Javascript onAugust 25, 2017

本文主要给大家介绍了关于Vue.nextTick()的正确使用,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

什么是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 更新完成后就会调用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
详解Javascript继承的实现
Mar 25 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 #jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 #Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 #Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 #Javascript
JavaScript数据类型的存储方法详解
Aug 25 #Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 #Javascript
Vue.js实现网格列表布局转换方法
Aug 25 #Javascript
You might like
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
vue cli升级webapck4总结
2018/04/04 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
python函数局部变量用法实例分析
2015/08/04 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
企业总经理岗位职责
2014/02/13 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
大学毕业感言200字
2014/03/09 职场文书
委托书格式要求
2015/01/28 职场文书
安全教育培训制度
2015/08/06 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android