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 相关文章推荐
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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
CodeIgniter CLI模式简介
2014/06/17 PHP
php实现的日历程序
2015/06/18 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
Python数据类型学习笔记
2016/01/13 Python
python 爬取微信文章
2016/01/30 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python对象属性自动更新操作示例
2018/06/15 Python
在django view中给form传入参数的例子
2019/07/19 Python
pymysql模块的操作实例
2019/12/17 Python
python批量处理txt文件的实例代码
2020/01/13 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
cf搞笑广告词
2014/03/14 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
离婚协议书怎么写
2014/09/12 职场文书
先进工作者申报材料
2014/12/23 职场文书
导游词欢迎词
2015/02/02 职场文书
廉洁自律个人总结
2015/02/14 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
oracle数据库去除重复数据
2022/05/20 Oracle