微客导航 » 文章资讯 » vue中nextTick用法实例

vue中nextTick用法实例

2023-08-14 21:36:04 142

什么是Vue.nextTick()

官方文档解释如下：

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM，获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题，所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的js代码，比如Swiper扩展包的

varswiper=newSwiper('.swiper-container',{
   pagination:'.swiper-pagination',
   nextButton:'.swiper-button-next',
   prevButton:'.swiper-button-prev',
   paginationClickable:true,
   spaceBetween:30,
   centeredSlides:true,
   autoplay:2500,
   autoplayDisableOnInteraction:false
  });


{{item}}

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

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

返回顶部
3162201930
czq8825@qq.com

vue中nextTick用法实例

热门推荐

随机推荐