关于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 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
python入门之井字棋小游戏
2020/03/05 Python
PageFactory设计模式基于python实现
2020/04/14 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
文史专业毕业生自荐信
2013/11/17 职场文书
教师个人读书活动总结
2014/07/08 职场文书
李强为自己工作观后感
2015/06/11 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL