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 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
vue实现列表的添加点击
Dec 29 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 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
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
在Python中进行自动化单元测试的教程
2015/04/15 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python模块的加载讲解
2019/01/15 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
毕业学生推荐信
2013/12/01 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
求职信模板
2014/05/23 职场文书
蜗居观后感
2015/06/11 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript