Vue3集成Chart.js调用update()触发无限递归错误求助

问题根源 #

Chart.js v3+的更新机制与Vue3的响应式系统存在冲突：Vue3会对响应式对象的所有属性进行依赖追踪，而Chart实例本身包含大量内部状态和DOM事件监听，当调用chart.update()时，Chart.js会触发DOM相关操作，触发Vue的响应式更新，进而再次触发Chart的更新，形成无限递归循环。而Chart.js v2.9.4的事件触发逻辑更简单，未触发该循环。

核心解决方案 #

1. 避免Chart实例被Vue响应式代理

不要将Chart实例存储在响应式变量（如ref/reactive）中，使用markRaw标记实例，防止Vue对其进行响应式处理：

import { markRaw } from 'vue';

// 创建实例时用markRaw包装
chartInstance = markRaw(new Chart(canvasElement, chartConfig));

2. 手动控制数据更新与图表刷新

• 不要依赖Vue的自动响应式更新触发图表刷新，而是在数据修改后手动调用chart.update()。
• 避免在watch中直接触发update()（除非配置正确的防抖或刷新时机），优先通过用户操作（如按钮点击）或明确的业务逻辑触发。

完整示例代码 #

<template>
  <canvas ref="chartCanvas"></canvas>
  <button @click="refreshChart">更新图表数据</button>
</template>

<script setup>
import { ref, onMounted, markRaw } from 'vue';
import Chart from 'chart.js/auto';

const chartCanvas = ref(null);
let chartInstance = null;

// 响应式存储图表数据
const chartData = ref({
  labels: ['一月', '二月', '三月'],
  datasets: [{
    label: '月度销售额',
    data: [1200, 1900, 3000],
    backgroundColor: '#2196f3'
  }]
});

onMounted(() => {
  if (!chartCanvas.value) return;
  // 创建图表实例并标记为非响应式
  chartInstance = markRaw(new Chart(chartCanvas.value, {
    type: 'bar',
    data: chartData.value,
    options: {
      responsive: true,
      maintainAspectRatio: false
    }
  }));
});

const refreshChart = () => {
  // 修改响应式数据
  chartData.value.datasets[0].data = [
    Math.floor(Math.random() * 5000),
    Math.floor(Math.random() * 5000),
    Math.floor(Math.random() * 5000)
  ];
  // 手动刷新图表
  if (chartInstance) {
    // 可选：使用'none'模式跳过动画，减少触发额外DOM事件的可能
    chartInstance.update('none');
  }
};
</script>

<style scoped>
canvas {
  height: 300px;
}
</style>

可选：自动监听数据更新 #

如果需要自动响应数据变化刷新图表，可使用带flush: 'post'的watch，并避免直接替换chartInstance.data，而是逐个更新属性：

import { watch } from 'vue';

watch(chartData, (newData) => {
  if (!chartInstance) return;
  // 逐个更新数据属性，避免直接替换对象触发额外响应
  chartInstance.data.labels = newData.labels;
  chartInstance.data.datasets = [...newData.datasets];
  chartInstance.update();
}, { deep: true, flush: 'post' });

关键注意事项 #

• 绝对不要将Chart实例存入reactive对象或未用markRaw处理的ref中，否则Vue会深度追踪实例的所有内部属性，触发无限更新。
• 避免在图表的options中使用Vue的响应式数据作为回调参数，比如onClick等事件回调，若必须使用，需用markRaw包装回调函数。

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