详解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(){ varrequest=$.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
exportdefault{ getFromConfig(config){ return$.ajax({data:config}) } }
然后是action.js
exportconstgetArticleList=({dispatch},config)=>{ returnapi.getFromConfig(config).then(({data})=>{ dispatch(types.RECEIVE_ARTICLE,data,config.page) }) }
这里一定要加上return,这样就可以返回一个Promise对象
最后是vue组件
methods:{ loadMore(page=this.page){ varid=this.$route.params.id||"" Promise.all([ this.getArticleList({ id:id, page:page }) ]).then(()=>{ this.$nextTick(function(){ //balabala }) }) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。