javascript - 在 Vue Chart js 中使用计算属性时出现无限循环

Question

我正在尝试使用 API 调用中的新数据每 5 秒更新一次图表。我的图表正在更新，但每个点都会渲染数百次。我检查了日志，它显示导致了无限循环，我不知道如何解决这个问题。以下是我当前的代码:

注意:“graphData”属性是我从父级传递的数组，它是我想要添加到图表中的 API 调用的数据

ChildComponent.vue

<template>
<div class="graphCard">
    <Linechart :chartData="dataCollection" :options="options" />
</div>
</template>


<script>
import Linechart from '@/utils/Linechart.js'

export default {
components: {
    Linechart
},
props: ['graphData'],
data() {
    return {
        collection: []
    }
},  
computed: {       
    dataCollection() { 
        this.collection.push(this.graphData[0])
        return { 
            datasets: [
                    {
                    label: 'chart',
                    backgroundColor: 'indigo',
                    borderColor: 'indigo',
                    fill:false,
                    showLine: true,
                    data: this.collection
                    }]
        }    
},
options() {
        return {
            id: 'Cumulative',
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    distribution: 'series',
                    time: {
                        displayFormats: {
                            millisecond: 'mm:ss:SS',
                            quarter: 'MMM YYYY'
                        } 
                    }
                }],
                yAxes: [{
                    ticks: {
                        //beginAtZero: true
                    }
                }]
            }
        }
    }

折线图.js

import { Scatter, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
    extends: Scatter,
    mixins: [reactiveProp],
    props: ['chartData', 'options'],
    mounted () {
        this.renderChart(this.chartData, this.options)
    }
}

在另一种方法中，我还尝试将 dataCollection 和选项设置为“数据”而不是“计算”，并在 graphData 属性上使用观察器，但图表没有更新并遇到问题“未捕获的类型错误:无法”读取未定义的属性“跳过”

Answer 1

通常，计算比观察者更好，但我不确定是否可以在没有更多上下文的情况下调试这个无限循环。因此，这是应该工作的 data + watch 替代方案。

代码:

<template>
<div class="graphCard">
    <Linechart :chartData="dataCollection" :options="options" v-if="dataCollection.datasets[0].data.length"/>
</div>
</template>

<script>
import Linechart from '@/utils/Linechart.js'

export default {
    components: {
        Linechart
    },
    props: ['graphData'],
    data() {
        return {
            dataCollection: {
                datasets: [{
                    label: 'chart',
                    backgroundColor: 'indigo',
                    borderColor: 'indigo',
                    fill:false,
                    showLine: true,
                    data: []
                    }]
            },
            options: {
                id: 'Cumulative',
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        distribution: 'series',
                        time: {
                            displayFormats: {
                                millisecond: 'mm:ss:SS',
                                quarter: 'MMM YYYY'
                            }
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            //beginAtZero: true
                        }
                    }]
                }
            }
        }
    },
    watch: {
      graphData (newData) {
        this.dataCollection.datasets[0].data.push(newData[0])
      }
    }
}