vue 中 $nextTick() 不生效的问题

问题描述

this.$nextTick() 是在数据完成更新后立即获取数据,但是我使用nextTick没有生效,获取的数据还是更新前的。

相关代码

<mt-tabbar v-model="selected" fixed>
  <mt-tab-item id="home">
    <i @click="changeHash" slot="icon" class="iconfont icon-shouye"></i>
    首页
  </mt-tab-item>
  <mt-tab-item id="member">
    <i @click="changeHash" slot="icon" class="iconfont icon-huiyuan"></i>
    会员
  </mt-tab-item>
  <mt-tab-item id="shopcart">
    <i @click="changeHash" slot="icon" class="iconfont icon-dingdan"></i>
    订单
  </mt-tab-item>
  <mt-tab-item id="search">
    <i @click="changeHash" slot="icon" class="iconfont icon-icon-find"></i>
    查找
  </mt-tab-item>
</mt-tabbar>

components: {},
data() {
  return {
    selected: "home"
  };
},
methods: {
  changeHash() {
    console.log('之前',this.selected);
    //在数据完成更新后发生的行为
    this.$nextTick(function() {
        console.log('之后',this.selected);
    });
  }
},
watch: {
  // selected(newVal) {
  //   this.$router.push({
  //     name: newVal
  //   });
  // }
}


你期待的结果是什么?实际看到的错误信息又是什么?
我想看到当点击不同的tab前后数据会发生变化,而不是下面这种情况。
之前 home
之后 home
之前 member
之后 member
之前 shopcart
之后 shopcart

在这里插入图片描述

vue数据驱动视图更新的逻辑是:data变化 --> nextTick触发 --> 更新vdom --> 新旧vdom对比 --> 生成dom更新视图。
nextTick是下一个eventLoop里面的一个待执行的钩子函数。
vue数据驱动视图更新的逻辑是:data变化 --> nextTick触发 --> 更新vdom --> 新旧vdom对比 --> 生成dom更新视图。
js单线程的原因,nextTick里面写的代码会在生成dom这步后面执行,所以一般在这里拿最新的dom,这也是nextTick的应用场景,它的其它场景没见过。

然后:vue的data赋值是一个同步的过程,nextTick函数在data的值变化后的某个时间触发。同步过程的前后两个点,原则上是不需要知道的,因为没有意义。
最后:至于你要看数据的变化前后,可以watch selected,新旧值都会给你

补充:再次审题了一下,你把点击事件绑定在option上,在选择的时候,肯定是先触发事件,再selected赋值,你再去看看 这个select组件的用法,你用错了。-_-

在这里插入图片描述

用 setTimeout 就可以了
setTimeout(function() {
    console.log('之后',this.selected);
}500);

nextTick:将回调延迟到下次DOM更新循环之后执行,这就可能会造成执行延后,具体看你项目的逻辑,一般的解决方法都是setTimeout。


  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值