记录一次vue数据不同步的排查

今天我遇到了一个vue异步获取数据后视图没有更新的问题，排查了很久很久，最后才发现自己踩在了一个自己万万没有想到的坑上，所以记录一下。

常见的解决方案

关于vue数据不同步的排查已经有很多类似的博客了，一般而言，原因有一下几点：

• 数据没有设置成功
• 设置的数据不是响应式的
• 设置的数据和视图上的变量不是同一个，可能设置错了变量

既然写到类似话题，我也罗列一下相关的解决方案：

• 使用this.$set()，
• 可以尝试类似this.data=JSON.parse(JSON.stringify(data))去排查是不是数据劫持的问题。
  这个我一个同事遇到过一次，他发现他的变量里面部分属性没有设置get/set（就是没有被vue监听到，所以无法响应式），原因大概是他在原变量上加了新属性，但是没有被vue监听到。这是一个很有迷惑性的例子，大家可以看看下面的代码：
  这里其实是希望属性b可以被监听到的，所以尝试重新给this.data赋值，但是很遗憾，const data的引用和this.data是同一个，this.data = data并不能实现变量的覆盖（因为vue只有变量和之前不同才会对变量里面的所有属性做劫持，同一个引用，vue不会对新属性进行监听）

// 例子
// 假设已经有一个data
{
   
   
	data(