关于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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
js返回顶部实例分享
Dec 21 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
vue下的@change事件的实现
Oct 25 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源代码数组统计count分析
2011/08/02 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
巴西本土电商平台:Americanas
2020/06/21 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
实习单位推荐信范文
2013/11/27 职场文书
学习党章思想汇报
2014/01/07 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
2014年教师节寄语
2014/08/11 职场文书
2014年工商所工作总结
2014/12/09 职场文书
社区节水倡议书
2015/04/29 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python