Vue中父组件传递给子组件一个对象的时候，子组件监听调用多次问题

界面效果

传递方式

<Col span="16">
   <Card class="mg_left5">
       <p class="title themeBackground">拆回原因分析</p>
       <div class="panel_content">
           <FaultAnalysis :paramsGroup="{deptCode, statisDateStart: startDate, statisDateEnd: endDate}"></FaultAnalysis>
       </div>
   </Card>
</Col>

子组件监听

props: {
    paramsGroup: {
        type: Object,
        default: () => {}
    },
},
watch: {
    paramsGroup: {
        handler (val) {
            if (!lodash.isEmpty(val)) {
                this.getChartData()
            }
        },
        deep: true
    }
},

接口调用次数

注：当其中两个变量变化的时候，子组件监听调用了2次

通过计算属性处理

computed: {
    paramsGroup () {
        return {
            deptCode: this.deptCode,
            statisDateStart: this.startDate,
            statisDateEnd: this.endDate
        }
    }
},

传递方式

<Col span="16">
    <Card class="mg_left5">
        <p class="title themeBackground">拆回原因分析</p>
        <div class="panel_content">
            <FaultAnalysis :paramsGroup="paramsGroup"></FaultAnalysis>
        </div>
    </Card>
</Col>

接口调用次数