數據層數過多的小坑

　　初入門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)，查閱了官方文檔，得出了最后的解決方法，也就是上面的代碼。

結論：數據層數不宜深，情到深處快換人（換方法）= =