vue中nextTick用法实例

更新时间：2019年09月11日 14:52:03 作者：佳琪欧尼

在本篇文章里小编给大家整理了关于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
  });

<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发生变化，更新后执行的回调。

以上就是本次介绍的全部知识点内容，感谢大家对脚本之家的支持。

您可能感兴趣的文章:

vue
nextTick

vue+element模态框中新增模态框和删除功能
这篇文章主要介绍了vue+element模态框中新增模态框和删除功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
vue中多个倒计时实现代码实例
这篇文章主要介绍了vue中多个倒计时实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
vue+element UI中如何给指定日期添加标记
这篇文章主要介绍了vue+element UI中如何给指定日期添加标记问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
VUEX-action可以修改state吗
这篇文章主要介绍了VUEX-action可以修改state吗，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
webpack搭建vue环境时报错异常解决
这篇文章主要介绍了webpack搭建vue环境时报错异常解决,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
vue和webpack项目构建过程常用的npm命令详解
本文通过实例代码给大家介绍了vue和webpack项目构建过程常用的npm命令,需要的朋友可以参考下
2018-06-06
vue3语法中使用vscode打开满屏红线报错的完美解决方法
这篇文章主要介绍了vue3语法中使用vscode打开满屏红线报错的完美解决方法,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
Vue模板语法v-bind教程示例
这篇文章主要为大家介绍了Vue模板语法v-bind教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-12-12
解决ant design vue 表格a-table二次封装,slots渲染的问题
这篇文章主要介绍了解决ant design vue 表格a-table二次封装,slots渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue 前端导出后端返回的excel文件方式
这篇文章主要介绍了Vue 前端导出后端返回的excel文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04

vue中nextTick用法实例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具