javascript - Vue watch中的代码改变了被监视的数据，导致死循环

Question

目前我有一个按钮，它只是更改chartData 中的一个属性。我还有一个手表可以监视任何更改（包括嵌套更改），如果有任何更改，它会呈现一个新图表。然后新图表集的新渲染this.chartObject = new Chart我相信它会再次触发 Vue 手表并开始无限循环。

有什么办法可以避免这种情况？

更改数据的按钮：

<button @click='addChartData()'>Add Data</button>

数据：

data: function() {
    return {
        chartData: {
            labels: ['Red', 'Red', 'Red', 'Red', 'Red', 'Red'],
            datasets: [{
                data: [11, 10, 9, 8, 7, 6],
                label: 'My First dataset'
            }]
        },
        chartObject: null
    }
}

方法

methods: {
    renderChart(chartData, chartOptions){
        var ctx = document.getElementById('myChart').getContext('2d');
        this.chartObject = new Chart(ctx, {
            type: 'bar',
            data: chartData,
            options: chartOptions
        });
    },
    addChartData(){
        this.$set(this.chartData, 'labels', ['Red', 'Blue'])
        console.log(this.chartData)
    }
},

最后是手表：

watch: {
        'chartData.labels': function(newValue, oldValue){
            this.chartObject.destroy()
            this.renderChart(this.chartData, this.chartOptions)
            console.log('Changed')
        },
}

标签： javascriptvue.jsvuejs2