Ich habe diesen Arbeitscode, der ein Diagramm aktualisiert, in dem onMount eine Art Aktualisierung simuliert. Aber das Array im OnMounted-Hook komplett zu zerstören und mit neuen Werten neu aufzubauen, scheint nicht sehr effizient zu sein? Ich habe versucht, reaktive Komponenten für data_values ​​​​und label_values ​​​​zu verwenden, aber das führt zu einem Fehler, der den maximalen Aufrufstapel überschreitet, wenn das Update ausgelöst wird.

Meine Frage ist also: Gibt es eine bessere Möglichkeit, das Diagramm zu aktualisieren als den folgenden Code?

<template>
    <Line :data="chartData" :options="chartOptions" :style="{ backgroundColor: color }" class="bar_chart"></Line>
</template>

<script lang="ts" setup>
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend, ChartData
} from 'chart.js'
import {Line} from 'vue-chartjs'
import {computed, onMounted, reactive, ref} from "vue";

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
);

let chartOptions = {
    responsive: true,
    maintainAspectRatio: true
}
let color = "#FFFFFF"


const data_values = ref([40, 39, 10, 40, 39, 80, 40]);
const label_values = ref(['January', 'February', 'March', 'April', 'May', 'June', 'July']);

const chartData = computed(() => {
    // getter
    return {
        labels: label_values.value,
        datasets: [
            {
                label: 'Data One',
                backgroundColor: '#f87979',
                data: data_values.value
            }
        ]
    }
});

// Is it necessary to destructure and rebuild the entire array?
onMounted(() => {
    setInterval(() => {
        label_values.value = [...label_values.value, "August"];
        data_values.value = [...data_values.value, 1000];
    }, 3000)
})






</script>

Ich möchte in der Lage sein, reaktive Komponenten für data_values ​​​​und label_values ​​​​zu verwenden und bei einem fehlerfreien Update einfach auf das Array zu pushen, und die berechneten Eigenschaften werden das Update verarbeiten.