详解Vue + Vuex 如何使用 vm.$nextTick

网络编程 2024/9/1 佚名

3 2 1

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 呢"htmlcode">

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
      })
    })
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Vuex,vm.$nextTick,vm.$nextTick,Vue,vm.$nextTick

标签：

Vuex,vm.$nextTick,vm.$nextTick,Vue,vm.$nextTick

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“详解Vue + Vuex 如何使用 vm.$nextTick”

详解Vue + Vuex 如何使用 vm.$nextTick

暂无“详解Vue + Vuex 如何使用 vm.$nextTick”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

详解Vue + Vuex 如何使用 vm.$nextTick

Vuex,vm.$nextTick,vm.$nextTick,Vue,vm.$nextTick

Vue + Vue-router 同名路由切换数据不更新的方法

webpack+vue中使用别名路径引用静态图片地址

评论“详解Vue + Vuex 如何使用 vm.$nextTick”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接