詳解Vue + Vuex 如何使用 vm.$nextTick
vm.$nextTick
簡(jiǎn)單說(shuō)，因?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ù), 那么操作是很簡(jiǎn)單的
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 了, 具體代碼如下:
首頁(yè)是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
})
})
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-element-admin登錄全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)
在本篇文章和里小編給各位總結(jié)了關(guān)于vue路由跳轉(zhuǎn)傳遞參數(shù)的三種方式以及相關(guān)代碼，需要的朋友們可以學(xué)習(xí)下。2020-05-05
vue + vuex todolist的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue + vuex todolist的實(shí)現(xiàn)示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
大前端代碼重構(gòu)之事件攔截iOS?Flutter?Vue示例分析
這篇文章主要為大家介紹了大前端代碼重構(gòu)之事件攔截iOS?Flutter?Vue示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
詳解Vue 數(shù)據(jù)更新了但頁(yè)面沒有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁(yè)面沒有更新的 7 種情況匯總及延伸總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue項(xiàng)目分包打包配置(包含dev)完整過(guò)程
最近接到一個(gè)需求,公司需要對(duì)vue項(xiàng)目實(shí)現(xiàn)線上打包,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目分包打包配置(包含dev)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue?extend+promise封裝全局彈窗組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章給大家介紹了Vue.js 表單控件操作的相關(guān)知識(shí)，本文通過(guò)實(shí)例演示了input和textarea元素中使用v-model的方法，本文給大家介紹的非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03
vue-cli項(xiàng)目中img如何使用require動(dòng)態(tài)獲取圖片
這篇文章主要介紹了vue-cli項(xiàng)目中img如何使用require動(dòng)態(tài)獲取圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-09-09
Vue實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法
下面小編就為大家分享一篇Vue實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03