面试题：Vue图表组件封装时如何实现数据动态更新

Question

在Vue图表组件封装过程中，假设已经完成了基本的图表绘制。当传入的数据源发生变化时，如何确保图表能够实时更新展示最新数据，请描述实现思路及关键代码。

Answer 1

实现思路

1. 响应式数据绑定：利用Vue的响应式系统，将数据源定义为响应式数据。这样当数据源变化时，Vue会检测到变化并触发更新。
2. watch监听：使用watch选项监听数据源的变化。一旦数据源变化，触发相应的更新函数。
3. 更新图表：在更新函数中，根据新的数据源重新绘制图表。

关键代码

<template>
  <div id="chart"></div>
</template>

<script>
import { Chart } from 'chart.js';

export default {
  data() {
    return {
      chartData: {
        labels: [],
        datasets: [
          {
            label: '数据',
            data: []
          }
        ]
      }
    };
  },
  props: {
    // 传入的数据源
    sourceData: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.renderChart();
  },
  watch: {
    sourceData: {
      deep: true,
      handler(newData) {
        this.chartData.labels = newData.labels;
        this.chartData.datasets[0].data = newData.data;
        this.renderChart();
      }
    }
  },
  methods: {
    renderChart() {
      const ctx = document.getElementById('chart').getContext('2d');
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Chart(ctx, {
        type: 'bar',
        data: this.chartData,
        options: {
          // 图表配置项
        }
      });
    }
  }
};
</script>

在上述代码中：

1. data中定义了chartData用于存储图表的数据。
2. props接收外部传入的sourceData数据源。
3. mounted钩子函数中首次渲染图表。
4. watch监听sourceData的变化，一旦变化，更新chartData并重新调用renderChart方法重新绘制图表。renderChart方法负责创建或更新图表实例。