vue使用echart图数据渲染不出来引发的思考(Vue 不能检测对象属性的添加或删除)

今天在使用echart柱状图时，发现渲染不出数据，而我在控制台可以看到数据已经异步请求获取了。

数据请求代码如下：

    getHistoryChartData:function() {
      const params = {
        project: this.selected_project_id
      }
      getHistorytaskchart(params).then(response => {
        this.chartData.previous_data = response.data.previous_data
        this.chartData.current_data = response.data.current_data
      }).catch(err => {
        console.error(err)
      })
    }

实例属性chartData定义如下：

箭头部分就是导致echart柱状图渲染不出的原因，定义chartData时未定义其属性previous_data和current_data，

而我在数据请求的方法中又给这两个属性赋值

参考文档发现，由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

因此问题解决办法有两种：

1. data:function() {
       return {
         chartData: {
           previous_data:[],
           current_data:[]
         }
       }
   }

   定义根实例对象属性时也将该对象的previous_data和current_data定义好，如上图

2. 使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

     getHistoryChartData:function() {
           const params = {
             project: this.selected_project_id
           }
           getHistorytaskchart(params).then(response => {
             Vue.set(this.chartData, 'previous_data',  response.data.previous_data)
             Vue.set(this.chartData, 'current_data',  response.data.current_data)
             // this.chartData.previous_data = response.data.previous_data
             // this.chartData.current_data = response.data.current_data
           }).catch(err => {
             console.error(err)
           })
         }

    

3. 可以使用Object.assign() 或 _.extend()赋值多个对象属性。这里我们应该使用两个对象赋值到一个空对象。使用Object.assign()合并this.chartData和response.data到一个空对象，再将返回的新对象赋值给this.chartData,这样的赋值操作Vue可以检测到，从而响应页面视图的变化。

   getHistoryChartData:function() {
         const params = {
           project: this.selected_project_id
         }
         getHistorytaskchart(params).then(response => {
           // Vue.set(this.chartData, 'previous_data', response.data.previous_data)
           // Vue.set(this.chartData, 'current_data', response.data.current_data)
           this.chartData = Object.assign({}, this.chartData, response.data)
           // this.chartData.previous_data = response.data.previous_data
           // this.chartData.current_data = response.data.current_data
         }).catch(err => {
           console.error(err)
         })
       }

   至此问题便解决了