vm.$nextTick
簡單說，因為DOM至少會在當前tick里面的代碼全部執(zhí)行完畢再更新。所以不可能做到在修改數據后并且DOM更新后再執(zhí)行，要保證在DOM更新以后再執(zhí)行某一塊代碼，就必須把這塊代碼放到下一次事件循環(huán)里面，比如setTimeout(fn, 0)，這樣DOM更新后，就會立即執(zhí)行這塊代碼。
//改變數據 vm.message = 'changed' //想要立即使用更新后的DOM。這樣不行，因為設置message后DOM還沒有更新 console.log(vm.$el.textContent) // 并不會得到'changed' //這樣可以，nextTick里面的代碼會在DOM更新后執(zhí)行 Vue.nextTick(function(){ console.log(vm.$el.textContent) //可以得到'changed' }) vm.$nextTick 的作用是將回調延遲到下次 DOM 更新循環(huán)之后執(zhí)行。
正常在 ready/mounted 中獲取數據, 那么操作是很簡單的
ready() { // vue2 為 mounted() { var request = $.ajax({ type: "POST", dataType: 'json', url: "api.php" }); request.then((json) => { // balabala this.$nextTick(function () { // balabala }) });}如果是用 vuex 的話, 由于vuex的數據操作都在 action 和 mutations, 然后在 ready/mounted 中調用 action 里的函數, 那么這時候該怎么用 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 }) }) }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
