Echarts:Watch数据与option数据冲突导致的死循环

echarts图表定义在子组件中，父组件从后台得到数据后再给子组件传值。因为ajax请求是异步的，执行顺序为echarts绘制然后父组件才得到数据传给echarts子组件，所以在echarts中不会渲染数据，因此我在子组件中用Watch来监听父组件传递的值的变化。

  // 监听获取数据的变化
  @Watch("dataX")
  onDataXChange(newDataX: string[], oldDataX: string[]) {
    this.dataX = newDataX;
    this.drawChartLine();
  }

后台返回的数据x轴为年份，y轴为数值，这个年份不是从打到小排列的

 

因此后来又提出了一个需求是要给x轴的年份排序，按从小到大展示 

然后。。我就直接在配置option的时候给dataX排序了

xAxis: {
        type: "category",
        //排序
        data: this.dataX?.sort(function (a: PdCAny, b: PdCAny) {
          return a - b;
        }),
        boundaryGap: false,
        //坐标轴名称的样式
        axisLabel: {
          color: "rgba(192,196,206)",
          fontSize: 12,
          fontFamily: "Microsoft YaHei UI",
          fontWeight: "400",
        },
        // 轴线样式
        axisLine: {
          lineStyle: {
            color: "#FFFFFF",
          },
        },
        //不显示x坐标刻度
        axisTick: {
          show: false,
        },
      },

于是出现一个报错“You may have an infinite update loop in watcher with expression”：

而且打包上传到服务器之后页面直接卡死了！

为什么会出现这个bug呢？原因如下：

首先dataX在created生命周期中获取数据时也发生了变化，Watch监听到后，就执行option操作，结果option中的dataX中的数组进行了排序，然后watch监听的dataX又发生变化，陷入了无限死循环中。

于是我在父组件中得到dataX的值后的数据之后就对这个数组进行了排序，避免了死循环的错误。

总结：watch的数据不要随意修改，不要在watch中改变所监听的数据！~