快捷導(dǎo)航

vue中nextTick用法實(shí)例

更新時(shí)間：2019年09月11日 14:52:03 作者：佳琪歐尼

在本篇文章里小編給大家整理了關(guān)于vue中nextTick用法實(shí)例以及相關(guān)代碼內(nèi)容，需要的朋友們可以參考下。

什么是Vue.nextTick()

官方文檔解釋如下：

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。

我理解的官方文檔的這句話的側(cè)重點(diǎn)在最后那半句獲取更新后的DOM，獲取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出問(wèn)題，所以就衍生出了這個(gè)獲取更新后的DOM的Vue方法。所以放在Vue.nextTick()回調(diào)函數(shù)中的執(zhí)行的應(yīng)該是會(huì)對(duì)DOM進(jìn)行操作的 js代碼，比如Swiper擴(kuò)展包的

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('數(shù)據(jù)已經(jīng)更新')
     });

     this.$nextTick(function(){
       alert('v-for渲染已經(jīng)完成')
     })
   }
}})

Vue.nextTick(callback)`，當(dāng)數(shù)據(jù)發(fā)生變化，更新后執(zhí)行回調(diào)。
Vue.$nextTick(callback)`，當(dāng)dom發(fā)生變化，更新后執(zhí)行的回調(diào)。

以上就是本次介紹的全部知識(shí)點(diǎn)內(nèi)容，感謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

vue
nextTick

相關(guān)文章

vue+element模態(tài)框中新增模態(tài)框和刪除功能
這篇文章主要介紹了vue+element模態(tài)框中新增模態(tài)框和刪除功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue+element UI中如何給指定日期添加標(biāo)記
這篇文章主要介紹了vue+element UI中如何給指定日期添加標(biāo)記問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
VUEX-action可以修改state嗎
這篇文章主要介紹了VUEX-action可以修改state嗎，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決
這篇文章主要介紹了webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
vue和webpack項(xiàng)目構(gòu)建過(guò)程常用的npm命令詳解
本文通過(guò)實(shí)例代碼給大家介紹了vue和webpack項(xiàng)目構(gòu)建過(guò)程常用的npm命令,需要的朋友可以參考下
2018-06-06
vue3語(yǔ)法中使用vscode打開(kāi)滿屏紅線報(bào)錯(cuò)的完美解決方法
這篇文章主要介紹了vue3語(yǔ)法中使用vscode打開(kāi)滿屏紅線報(bào)錯(cuò)的完美解決方法,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
Vue模板語(yǔ)法v-bind教程示例
這篇文章主要為大家介紹了Vue模板語(yǔ)法v-bind教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
解決ant design vue 表格a-table二次封裝,slots渲染的問(wèn)題
這篇文章主要介紹了解決ant design vue 表格a-table二次封裝,slots渲染的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
Vue 前端導(dǎo)出后端返回的excel文件方式
這篇文章主要介紹了Vue 前端導(dǎo)出后端返回的excel文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04