vm.$nextTick
簡單說,因為DOM至少會在當(dāng)前tick里面的代碼全部執(zhí)行完畢再更新。所以不可能做到在修改數(shù)據(jù)后并且DOM更新后再執(zhí)行,要保證在DOM更新以后再執(zhí)行某一塊代碼,就必須把這塊代碼放到下一次事件循環(huán)里面,比如setTimeout(fn, 0),這樣DOM更新后,就會立即執(zhí)行這塊代碼。
//改變數(shù)據(jù) vm.message = 'changed' //想要立即使用更新后的DOM。這樣不行,因為設(shè)置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 }) }) } }
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com