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 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
create-react-app修改为多页面支持的方法
May 17 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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项目打包方法
2008/02/18 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
试用php中oci8扩展
2015/06/18 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
Python中的作用域规则详解
2015/01/30 Python
python threading模块操作多线程介绍
2015/04/08 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Django中FilePathField字段的用法
2020/05/21 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
小学生自我评价范例
2013/09/24 职场文书
房产转让协议书
2014/04/11 职场文书
交通事故协议书范文
2014/10/23 职场文书
2016小学新学期寄语
2015/12/04 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
MySQL GTID复制的具体使用
2022/05/20 MySQL