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

發(fā)布時(shí)間：2020-10-09 20:07:47 來源：腳本之家閱讀：263 作者：M.M.F 欄目：web開發(fā)

vm.$nextTick

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

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

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

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

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ù), 那么這時(shí)候該怎么用 vm.$nextTick 呢?

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

首頁(yè)是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, 這樣就可以返回一個(gè)Promise對(duì)象

最后是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
      })
    })
  }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽