vm.$nextTick

簡單說，因?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í)有所幫助，也希望大家多多支持錯(cuò)新站長站。