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

vm.$nextTick

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供壺關(guān)企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、成都網(wǎng)站制作、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為壺關(guān)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jì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ù), 那么操作是很簡單的

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 了, 具體代碼如下:

首頁是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
      })
    })
  }
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

名稱欄目：詳解Vue+Vuex如何使用vm.$nextTick
文章起源：http://muchs.cn/article34/pdjise.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、面包屑導(dǎo)航、網(wǎng)站改版、品牌網(wǎng)站制作、搜索引擎優(yōu)化、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容