关于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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 Javascript
JS实现购物车基本功能
Nov 08 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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模板之Phpbean的目录结构
2008/01/10 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
Python实现的tcp端口检测操作示例
2018/07/24 Python
python获取本机所有IP地址的方法
2018/12/26 Python
python Tkinter的图片刷新实例
2019/06/14 Python
python中的句柄操作的方法示例
2019/06/20 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python中count函数知识点浅析
2020/12/17 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
关于.NET, HTML的五个问题
2012/08/29 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
问卷调查计划书
2014/01/10 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
安全保证书范文
2014/04/29 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
债务纠纷起诉书
2015/05/20 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
python 批量压缩图片的脚本
2021/06/02 Python
Python字典的基础操作
2021/11/01 Python