详解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) }) }
这里一定要加上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 }) }) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
element日期选择器el-date-picker样式图文详解
最近写的项目里面有一个功能是日期选择功能,第一反应是使用element里面的el-date-picker组件,下面这篇文章主要给大家介绍了关于element日期选择器el-date-picker样式的相关资料,需要的朋友可以参考下2022-09-09使用sessionStorage解决vuex在页面刷新后数据被清除的问题
localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度。本文使用的是sessionStorage解决vuex在页面刷新后数据被清除的问题,需要的朋友可以参考下2018-04-04使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法
这篇文章主要介绍了使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法,解决方法不复杂通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-08-08
最新评论