快捷導(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。

我理解的官方文檔的這句話(huà)的側(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)文章

elementui下image組件的使用
本文主要介紹了elementui下image組件的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問(wèn)題
這篇文章主要介紹了解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
深入淺析vue中cross-env的使用
cross-env是跨平臺(tái)設(shè)置和使用環(huán)境變量的腳本。這篇文章主要介紹了vue中cross-env的使用,需要的朋友可以參考下
2019-09-09
Vue2中引入使用ElementUI的教程詳解
這篇文章主要為大家詳細(xì)介紹了Vue2中引入使用ElementUI教程的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的可以參考下
2024-03-03
Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫(xiě)return
這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫(xiě)return的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue制作toast組件npm包示例代碼
這篇文章主要介紹了vue制作一個(gè)toast組件npm包,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-10-10
Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置
這篇文章主要為大家介紹了Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
Nuxt3:拉取項(xiàng)目模板失敗問(wèn)題以及解決
文章描述了在使用官網(wǎng)命令創(chuàng)建Nuxt3項(xiàng)目時(shí)遇到的問(wèn)題,通過(guò)分析命令,推測(cè)問(wèn)題出在拉取項(xiàng)目模板失敗,解決方法是手動(dòng)訪問(wèn)并下載項(xiàng)目模板,解壓后按照官網(wǎng)教程安裝依賴(lài)并啟動(dòng),最終成功解決問(wèn)題
2024-12-12
vue+element tabs選項(xiàng)卡分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue+element tabs選項(xiàng)卡分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
Vue3?setup添加name的方法步驟
如果你在 vue3 開(kāi)發(fā)中使用了語(yǔ)法的話(huà),對(duì)于組件的name屬性,需要做一番額外的處理,下面這篇文章主要給大家介紹了關(guān)于Vue3?setup添加name的相關(guān)資料,需要的朋友可以參考下
2022-11-11