vue中nextTick用法实例


Posted in Javascript onSeptember 11, 2019

什么是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
  });
<ul id="demo">
  <li v-for="item in list">{{item}}</div>
</ul>
 
 new Vue({
  el:'#demo',
  data:{
   list=[0,1,2,3,4,5,6,7,8,9,10]
  },
  methods:{
   push:function(){
     this.list.push(11);
     this.nextTick(function(){
       alert('数据已经更新')
     });

     this.$nextTick(function(){
       alert('v-for渲染已经完成')
     })
   }
}})
  • Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。
  • Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。

以上就是本次介绍的全部知识点内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 #Javascript
如何换个角度使用VUE过滤器详解
Sep 11 #Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 #jQuery
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 #Javascript
解析vue、angular深度作用选择器
Sep 11 #Javascript
javascript 构建模块化开发过程解析
Sep 11 #Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 #Javascript
You might like
php实现的简单日志写入函数
2015/03/31 PHP
php实现倒计时效果
2015/12/19 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
Python中join函数简单代码示例
2018/01/09 Python
Django 使用logging打印日志的实例
2018/04/28 Python
python抽取指定url页面的title方法
2018/05/11 Python
python 用下标截取字符串的实例
2018/12/25 Python
关于Python作用域自学总结
2019/06/10 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
浅析python redis的连接及相关操作
2019/11/07 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
村捐赠仪式答谢词
2014/01/21 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
MySQL transaction事务安全示例讲解
2022/06/21 MySQL