vue 子组件watch监听死循环问题如何解决

Question

vue watch监听死循环问题，子组件报错[Vue warn]: You may have an infinite update loop in watcher with expression "configure"

//父组件
data(){
    ratio_chart: {
        yAxisData: [],
        curSeriesData: [],
        lastSeriesData: []
    },
},
methods:{
    getData(){
        this.$axios.post('xxx',params).then(res => {
            let result = res.data
            result.map((item) => {
            this.ratio_chart.curSeriesData.push(item.total)
            this.ratio_chart.lastSeriesData.push(item.lastTotal)
            this.ratio_chart.yAxisData.push(item.quesCateName)
        })
        })
    }
}

将ratio_chart传值给子组件configure
<child :configure='ratio_chart'></child>

//child.vue
props: {
    configure: {
      type: Object,
      default () {
        return {}
      }
    },
},
watch: {
    configure: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.drawChart()
        }
      },
      deep: true
    }
  }

控制台子组件报错[Vue warn]: You may have an infinite update loop in watcher with expression "configure"

麻烦问下大家如何解决这个死循环的问题？谢谢

Answer 1

光看现在的代码，感觉是 drawChart 里也修改了 configure 导致的，你粘上来看看，
另外，建议优化一下 getData 函数，等批量处理后再更新
methods:{
     getData(){
        this.$axios.post('xxx',params).then(res => {
            let obj = {
                yAxisData: [],
                curSeriesData: [],
                lastSeriesData: []
            };
            res.data.forEach((item) => {
                obj.curSeriesData.push(item.total)
                obj.lastSeriesData.push(item.lastTotal)
                obj.yAxisData.push(item.quesCateName)
            });
            this.ratio_chart = obj;
        })
    }
}