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)。
