【对象数组复制问题】v-charts中dataEmpty和loading在axios请求后无法正确显示的解决方法

首先官方文档写是要引入CSS文件，我的项目是CDN引入的这里排除。

先上可以使用的代码

    <ve-histogram
      width="100%"
      height="300px"
      :data="{
          columns: ['', '', ''],
          rows: []
        }"
      :settings="chartSettings"
      :loading="loading"
      :data-zoom="dataZoom"
      v-if="dataEmpty"
    >
      <div v-if="!loading" class="data-empty">没有数据</div>
    </ve-histogram>
    <ve-histogram
      width="100%"
      height="300px"
      :data="chartData"
      :settings="chartSettings"
      :loading="loading"
      :data-zoom="dataZoom"
      v-else-if="!dataEmpty"
    ></ve-histogram>

为了保证empty和loading不同时出现，这里我写了两个组件，其中展示无数据的组建的data是写死的，避免一些数据上可能出现的冲突。

然后我发现我的dataEmpty属性一直为false。通过排查所有触发改变dataEmpty的函数，我把问题定位到了触发页面加载数据的watch中。

我在watch内监听了props数据的变化，但实际上我除了初始获取了一次数据改变了props中属性的值外，我还在获取值得时候不小心修改了props的值。

为了防止数组类型props数据被修改，我使用了扩展运算符。BUT问题的关键就在这里，我的数据即使是把数组复制了也还是有问题。因为我的数组里的元素是对象，复制的数组的地址和被复制的数组是不同的。但是值是相同的地址。

我们可以看一个例子

可以想到的解决方法有两个：

1. 把数组元素中的对象换成新的地址
2. 使watch只触发一次

---

这里我使用的是2中的方法。因为代码中很多地方都是复制了props的数组但实际还是改了props,所以这里我使watch触发一次。方法很简单，设置一个标记变量，watch触发的函数第一行进行判断如果不应该调用该函数就直接return就行了。有点类似函数防抖不过我这个只能触发一次，没有时间限制。