本文主要介紹了詳解Vue + Vuex 如何使用 vm.$nextTick，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
vm.$nextTick
簡單地說，因為DOM至少會在目前tick裡面的程式碼全部執行完畢再更新。所以不可能做到在修改資料後且DOM更新後再執行，要確保在DOM更新以後再執行某一塊程式碼，就必須把這塊程式碼放到下一次事件循環裡面，例如setTimeout(fn, 0)，這樣DOM更新後，就會立刻執行這塊程式碼。
//改变数据
vm.message = 'changed'
//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'
//这样可以，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
console.log(vm.$el.textContent) //可以得到'changed'
})vm.$nextTick 的作用是將回呼延遲到下次 DOM 更新迴圈之後執行。
正常在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)
})
}methods: {
loadMore(page = this.page) {
var id = this.$route.params.id || ""
Promise.all([
this.getArticleList({
id: id,
page: page
})
]).then(() => {
this.$nextTick(function () {
// balabala
})
})
}
}以上是詳解Vue + Vuex 使用 vm.$nextTick實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
