详解Vue + Vuex 如何使用 vm.$nextTick
发布时间：2020-12-17 02:42:56 所属栏目：百科 来源：网络整理
导读：vm.$nextTick 简单说，因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行，要保证在DOM更新以后再执行某一块代码，就必须把这块代码放到下一次事件循环里面，比如setTimeout(fn,0)，这样DOM更新后，就会
|
vm.$nextTick 简单说，因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行，要保证在DOM更新以后再执行某一块代码，就必须把这块代码放到下一次事件循环里面，比如setTimeout(fn,0)，这样DOM更新后，就会立即执行这块代码。 //想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed' //这样可以，nextTick里面的代码会在DOM更新后执行 vm.$nextTick 的作用是将回调延迟到下次 DOM 更新循环之后执行。 正常在 ready/mounted 中获取数据,那么操作是很简单的 {
// balabala
this.$nextTick(function () {
// balabala
})
});
}
如果是用 vuex 的话,由于vuex的数据操作都在 action 和 mutations,然后在 ready/mounted 中调用 action 里的函数,那么这时候该怎么用 vm.$nextTick 呢? 这时候我们就需要用到 Promise 了,具体代码如下: 首页是api.js 然后是action.js {
return api.getFromConfig(config).then(({data}) => {
dispatch(types.RECEIVE_ARTICLE,data,config.page)
})
}
这里一定要加上return,这样就可以返回一个Promise对象 最后是vue组件 {
this.$nextTick(function () {
// balabala
})
})
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |