如何在Vue3组合式API中重新渲染vue-chartjs图表

问题核心 #

1. 父组件传递给子组件的是ref对象本身，而非ref的实际值，导致vue-chartjs无法正确监听数据变化
2. 子组件未监听数据更新，缺少触发图表重新渲染的逻辑

修复步骤 #

1. 修正父组件的数据传递 #

父组件中graficas数组里的object需传递ref的实际值，而非ref对象本身：

// 在onMounted、backGap、forwardGap函数里，将graficas的赋值改为：
graficas.value = [
  { object: cpuReactive.value, title: 'CPU' },
  { object: ioReactive.value, title: 'IO' },
  { object: secReactive.value, title: 'SEC' }
] as any

2. 子组件监听数据变化并触发图表更新 #

通过ref获取Bar组件实例，监听props数据变化后调用图表的update()方法重新渲染：

<script setup lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import { ref, watch } from 'vue'
import { Bar } from 'vue-chartjs'

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
ChartJS.defaults.color = 'white'

const props = defineProps<{
  item: any
  options: any
}>()

// 获取Bar组件实例
const chartRef = ref<InstanceType<typeof Bar> | null>(null)

// 深度监听数据变化，触发图表更新
watch(
  () => props.item.object,
  () => {
    chartRef.value?.update()
  },
  { deep: true }
)
</script>

<template>
  <h2>{{ item.title }}</h2>
  <Bar ref="chartRef" :data="item.object" :options="options" class="grafica" />
</template>

3. 优化父组件响应式触发逻辑 #

确保更新cpuReactive等ref时传递新对象，保证响应式系统能检测到变化：

// 替换原有赋值逻辑，以cpu为例：
cpuReactive.value = JSON.parse(JSON.stringify(cpu)) as ChartData<'bar'>
// io和sec同理
ioReactive.value = JSON.parse(JSON.stringify(io)) as ChartData<'bar'>
secReactive.value = JSON.parse(JSON.stringify(sec)) as ChartData<'bar'>

额外优化建议 #

• 移除父组件中冗余的update:chart事件与子组件的updateChart函数，通过监听props即可实现更新
• 给graficas的v-for替换更稳定的key，比如:key="item.title"，避免index带来的渲染异常

内容的提问来源于stack exchange，提问作者francesco14