vue中nextTick用法实例

时间:2021-05-26

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

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章