Vue3集成Chart.js快速切换图表数据时报getContext空引用错误

高频连续触发数据更新时，watch回调会产生竞态问题：上一个Chart实例刚执行完destroy操作（内部会清空关联的canvas上下文引用），新的Chart实例还没完成初始化绑定，下一次更新回调就已经触发；此时要么访问到已经被销毁的空实例，要么拿到已经被释放的canvas上下文，就会抛出Cannot read properties of null (reading 'getContext')错误。
另外原代码直接用this.$el获取canvas元素、没有做空值保护、组件卸载时未销毁实例，也会放大这类问题的出现概率。

• 销毁Chart实例前先做非空判断，禁止对未初始化/已销毁的实例执行销毁操作
• 增加渲染锁，拦截高频重复的渲染请求，同一时间只允许一个渲染流程执行
• 用ref显式获取canvas元素，避免$el指向不稳定的问题
• 增加组件卸载生命周期的销毁逻辑，避免内存泄漏
• （可选）非必要不做全量销毁重建，数据更新时优先调用实例的update()方法更新图表，减少竞态可能

修复后的完整组件代码如下：

<template>
  <canvas ref="chartCanvas"></canvas>
</template>

<script>
import { defineComponent } from 'vue'
import Chart from 'chart.js/auto'

export default defineComponent({
  name: 'ChartComponent',
  props: {
    type: {
      type: String,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data: () => ({
    chart: null,
    isRendering: false
  }),
  watch: {
    data: {
      handler() {
        this.renderChart()
      },
      deep: true,
    },
    type() {
      this.renderChart()
    },
    options: {
      handler() {
        this.renderChart()
      },
      deep: true
    }
  },
  mounted() {
    this.renderChart()
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.destroy()
      this.chart = null
    }
  },
  methods: {
    renderChart() {
      if (this.isRendering) return
      this.isRendering = true

      if (this.chart) {
        this.chart.destroy()
        this.chart = null
      }

      const canvas = this.$refs.chartCanvas
      if (!canvas) {
        this.isRendering = false
        return
      }

      this.chart = new Chart(canvas, {
        type: this.type,
        data: this.data,
        options: this.options,
      })

      this.isRendering = false
    },
  },
})
</script>

优化提示：如果你的切换操作只修改图表数据、不改变图表类型，完全可以删掉销毁重建的逻辑，在watch里判断chart实例存在时，直接更新实例的data属性后调用this.chart.update()即可，渲染性能会高很多，也不会出现这类竞态报错。

内容的提问来源于stack exchange，提问作者Ибрагим Аскеров