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

Question

问题描述

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

Answer 1

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

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

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

Answer 2

用 setTimeout 就可以了

setTimeout(function() {
    console.log('之后',this.selected);
});

Answer 3

data数据修改是同步的，DOM更新是异步的。
你在nextTick前后获取data数据，相同是正常的。

Answer 4

应该是和我一样看开课吧的视频，我也出现同样的问题，但是视频确实实现了效果，难道是vue版本问题。十分奇怪，请问你是怎么解决这个问题的？