溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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)
})
}
這里一定要加上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
})
})
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
