vue中nextTick用法實例

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

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

什么是Vue.nextTick()

官方文檔解釋如下：

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

我理解的官方文檔的這句話的側(cè)重點在最后那半句獲取更新后的DOM，獲取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出問題，所以就衍生出了這個獲取更新后的DOM的Vue方法。所以放在Vue.nextTick()回調(diào)函數(shù)中的執(zhí)行的應(yīng)該是會對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)。

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

您可能感興趣的文章:

vue
nextTick

相關(guān)文章

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