詳解Vue + Vuex 如何使用 vm.$nextTick

更新時間：2017年11月20日 16:51:44 作者：M.M.F

這篇文章主要介紹了詳解Vue + Vuex 如何使用 vm.$nextTick，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

vm.$nextTick

簡單說，因為DOM至少會在當前tick里面的代碼全部執(zhí)行完畢再更新。所以不可能做到在修改數(shù)據(jù)后并且DOM更新后再執(zhí)行，要保證在DOM更新以后再執(zhí)行某一塊代碼，就必須把這塊代碼放到下一次事件循環(huán)里面，比如setTimeout(fn, 0)，這樣DOM更新后，就會立即執(zhí)行這塊代碼。

//改變數(shù)據(jù) 
vm.message = 'changed' 
 
//想要立即使用更新后的DOM。這樣不行，因為設置message后DOM還沒有更新 
console.log(vm.$el.textContent) // 并不會得到'changed' 
 
//這樣可以，nextTick里面的代碼會在DOM更新后執(zhí)行 
Vue.nextTick(function(){ 
  console.log(vm.$el.textContent) //可以得到'changed' 
})

vm.$nextTick 的作用是將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。

正常在 ready/mounted 中獲取數(shù)據(jù), 那么操作是很簡單的

ready() { // vue2 為 mounted() {
  var request = $.ajax({
    type: "POST",
    dataType: 'json',
    url: "api.php"
  });
  request.then((json) => {
    // balabala
    this.$nextTick(function () {
      // balabala
    })
  });
}

如果是用 vuex 的話, 由于vuex的數(shù)據(jù)操作都在 action 和 mutations, 然后在 ready/mounted 中調(diào)用 action 里的函數(shù), 那么這時候該怎么用 vm.$nextTick 呢?

這時候我們就需要用到 Promise 了, 具體代碼如下:

首頁是api.js

export default {
  getFromConfig(config) {
    return $.ajax({ data: config })
  }
}

然后是action.js

export const getArticleList = ({dispatch}, config) => {
  return api.getFromConfig(config).then(({data}) => {
    dispatch(types.RECEIVE_ARTICLE, data, config.page)
  })
}

這里一定要加上return, 這樣就可以返回一個Promise對象

最后是vue組件

methods: {
  loadMore(page = this.page) {
    var id = this.$route.params.id || ""
    Promise.all([
      this.getArticleList({
        id: id,
        page: page
      })
    ]).then(() => {
      this.$nextTick(function () {
        // balabala
      })
    })
  }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue中CSS?scoped的原理詳細講解
在組件中增加的css加了scoped屬性之后,就在會在當前這個組件的節(jié)點上增加一個data-v-xxx屬性,下面這篇文章主要給大家介紹了關于Vue中CSS?scoped原理的相關資料,需要的朋友可以參考下
2023-01-01
Vue3中jsoneditor的使用示例詳解
這篇文章主要為大家詳細介紹了Vue3中jsoneditor的使用相關知識,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起了解下
2024-01-01
vue3中覆蓋組件樣式的方法小結
在 Vue 3 中,覆蓋組件樣式的方法與 Vue 2 相似,但由于 Vue 3 更多地依賴于 CSS 的模塊化,一些最佳實踐可能會有所不同,下面就跟隨小編一起來了解一下吧
2024-04-04
對vue中methods互相調(diào)用的方法詳解
今天小編就為大家分享一篇對vue中methods互相調(diào)用的方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
解決Vue項目Network:?unavailable的問題
項目只能通過Local訪問而不能通過Network訪問,本文主要介紹了解決Vue項目Network:?unavailable的問題,具有一定的參考價值,感興趣的可以了解一下
2024-06-06
vue3路由配置以及路由跳轉傳參詳解
路由跳轉的同時傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關于vue3路由配置以及路由跳轉傳參的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-04-04
Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預發(fā)布環(huán)境
這篇文章主要介紹了vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預發(fā)布環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
Vue?elementUI表單嵌套表格并對每行進行校驗詳解
element-ui中有詳細的各種表格及表格方法,下面這篇文章主要給大家介紹了關于Vue?elementUI表單嵌套表格并對每行進行校驗的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-01-01
Vue echarts 實現(xiàn)離線中國地圖的示例代碼(細化到省份)
這篇文章主要介紹了Vue echarts 實現(xiàn)離線中國地圖,細化到省份,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-09-09