vue2 ajax异步请求，数据嵌套层数过多，导致页面无法正常通过数据驱动渲染

数据层数过多的小坑

　　初入门vue2，在开发项目过程中因为用到了vue-echarts-v3，涉及图表的数据，难免数据就有过多的层数，导致出现了这么一个坑，其实归根结底是自己没有按照vue2官方的方法进行对象数据修改。

　　首先，数据结构大致是这样的： 

echartData {
    data1 {
          name: 'line',
          series: [{
            name: '',
          }
          lineData: {
            title: '',
            captionOption: {
              isShow: true,
              countBoxs: [{
                name: '',
                value: '',
                date: ''
              }]
            },
          },
          legend: {
            data: ['xxx','xxx']
          }
    }
}

 

之前也有接触过类似的数据驱动修改视图渲染的写法，都是类似这回项目里一样写的，通过data.attr = xxx这种格式去进行修改，console.log输出时发现数据确实已经得到了修改。
但是为什么，就是不渲染？！

后来查阅了官方的说明，以及他人踩坑的经过，终于得到答案，最终写法如下：

that.$set(that.echartData,'data1',{
          name: 'line',
          series: [{
            name: 'xxx',
            data: bandwidthData.rows.map(item => item.text)
          },{
            name: 'xxx',
            data: bandwidthData.cp_rows.map(item => item.text)
          }],
          xAxis: {
            data: bandwidthData.rows.map(item => item.time)
          },
          lineData: {
            title: '',
            captionOption: {
              isShow: true,
              countBoxs: [{
                name: '',
                value: bandwidthData.peakValue,
                date: bandwidthData.peakTime
              }, {
                name: '',
                value: bandwidthData.totalFlow,
              }, {
                name: '',
                value: '',
              }]
            },
          },
          legend: {
            data: ['xxx','xxx']
          }
        });

 

请求是通过axios封装的ajax请求发出的，这个与造成本坑的原因无关，我们可以暂且不论。
代码中的that，是通过var that = this;在ajax请求发出前声明的：

　　var that = this;

　　that.$ajax({......})

为了将原先的this，也就是vue的对象保存起来，原理可以参考https://segmentfault.com/q/1010000007376594?_ea=1326047。

然后就是这个that.$set，网上资料有这么个说法，当数据不是data的第一层，而是包了几层之后，=赋值是不会触发页面渲染的，要用$set(obj,key,val)，查阅了官方文档，得出了最后的解决方法，也就是上面的代码。

结论：数据层数不宜深，情到深处快换人（换方法）= =