await this.$nextTick()和this.$nextTick(callback)有什么区别？记一次bug调试

背景

需要实现一个需求，一个小区业务详情页面，在左侧菜单栏切换了小区后，详情页跟着切换。

这个详情页面是根据url上的/:id来确定小区id的，所以切换了小区后，应该切换路由。

于是这样实现：

watch: {
    // 监听小区号变化
    neighNo(newVal) {
      if (newVal) {
        // 切换路由
        this.$router.replace(`/base/business/${newVal}`)
      }
    }
 },

问题

但是实际运行后发现，整个页面的表格数据都变成空了。查看控制台，表格数据是正确的。但是不显示。

这个代码实际也只是重新打开了一个页面，为什么表格数据无法渲染了呢？

调试

打印数据是正确的，却没有渲染，也就是说，是Vue没有监听到数据的变化。

这个页面本来工作是正常的，只是重新打开了，为什么不正常了呢？

如果是不能监听数组和对象的改变的话，这个表格数据是直接赋值的，也就是数组的引用直接改变，那应该是可以监测到数组变化的。

于是用$set尝试去赋值，发现无效。同时发现，不光是这个表格的数组失去了响应性，整个data里的变量，都失去了响应性。

于是我在每个生命周期函数里进行了打印，也在watch里打印，发现先执行watch，然后destroyed，然后路由改变，然后created，然后是请求接口。因为小区切换时，当前路由本身会自动刷新一遍，所以destroyed、created会执行两次，顺序每次执行会略有不同。

那就很有可能是切换路由的时机不对，尝试nextTick之后再切换路由。

解决

this.$nextTick(()=>{
    this.$router.replace(`/base/business/${newVal}`)
}

无效。

尝试用setTimeout。setTimout是宏任务，那肯定比$nextTick执行的时机更晚。

setTimeout(() => {
    this.$router.replace(`/base/business/${newVal}`)
}, 0)

无效。

把delay从0改成500，有效果了。但是loading的时间略久，而且肉眼仔细观察会发现其实是先加载了原先页面然后快速地开始加载切换的页面。多切换几个小区，有概率失效。

这就有点奇怪了，连setTimeout都无法解决。setTimeout本身是不彻底的解决方案，是下策，在$nextTick无法解决时才应使用。而且，如果delay时间太长，那效果就很奇怪了。

正束手无策时，把$nextTick换了种写法，居然就可以了！

  watch: {
    async neighNo(newVal) {
      if (newVal) {
        await this.$nextTick()
        this.$router.replace(`/base/business/${newVal}`)
      }
    }
  },

卧槽，这和上面的代码不是一个意思的吗？为什么这就可以？

翻看Vue官方文档，$nextTick用法：

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

区别仅仅是this的绑定不一样。

watch到neighNo的变化后，本身当前页会由于菜单栏小区切换而刷新，那么此时当前的页面实例将要销毁，而this应该绑定在了这个要销毁的实例上。然后又切换了路由，重新创建了页面实例，this在这个过程中失去了正确的上下文，从而导致data失去了响应性。

而用await的写法，this会根据语法作用域来确定绑定的上下文，每次都会绑定在对应的页面实例上，从而工作正常。