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实现附件上传功能
这篇文章主要为大家详细介绍了Vue实现附件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
Avue 组件库的使用初体验
这篇文章主要为大家介绍了Avue 组件库的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
Vue实现阻止浏览器记住密码功能的三种方法
本文主要介绍了Vue实现阻止浏览器记住密码功能的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
vue实现公共组件传值并及时监听到数据更新视图
这篇文章主要介绍了vue实现公共组件传值并及时监听到数据更新视图方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue基础ESLint Prettier配置教程详解
这篇文章主要介绍了vue基础ESLint Prettier配置教程详解，本文使用VsCode + Vue + ESLint + Prettier 实现代码格式规范 + 保存自动修复代码js+vue
2022-07-07
vue项目配置eslint保存自动格式化问题
这篇文章主要介绍了vue项目配置eslint保存自动格式化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
利用Nuxt.js做Vuex数据持久化
这篇文章主要介绍了利用Nuxt.js做Vuex数据持久化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue中的性能优化方案
本文主要介绍了Vue中的性能优化方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
Vue 中插槽的使用总结
这篇文章主要向大家分享的是Vue 中插槽的使用总结，包括内容有默认插槽、具名插槽、作用域插槽等内容，具有一定的参考价值，需要的小伙伴可以参考一下
2022-04-04
vue展示dicom文件医疗系统的实现代码
这篇文章主要介绍了vue展示dicom文件医疗系统的实现代码，非常不错，具有一定的参考借鉴加载,需要的朋友可以参考下
2018-08-08