Vue Chart JS 和选项反应性答案

【问题标题】：Vue Chart JS and options reactivityVue Chart JS 和选项反应性
【发布时间】：2020-05-20 07:54:09
【问题描述】：

我正在尝试重新创建甜甜圈以改变行为，如下所示： https://www.chartjs.org/samples/latest/scriptable/pie.html

我正在使用 VueJS 版本的 Chart JS，在重新创建它之后，它似乎根本没有反应。

这是我用来将图表更改为另一个图表的方法：

togglePieDoughnut() {
  this.options.cutoutPercentage = 50;
}

正如你所见，它并没有按预期工作，即使我使用了 reactiveprop mixin。

编辑：确切地说，我想重新创建图表更新行为，如 chartjs.org 网站上的示例所示。我不想重新渲染图表，而是更新它以使过渡保持平稳。

【问题讨论】：

【解决方案1】：

似乎问题在于模板没有对数据更改做出反应。强制模板重新渲染的最佳方法是绑定一个 key，例如，我们正在更改此值，模板将在更改时更新：

:key="options.cutoutPercentage"

【讨论】：

【解决方案2】：

如果我们在 options 变量中添加一个 watch 并在它发生时重新渲染图表会怎样？


watch: {
    options: function() {
      this._chart.destroy();
      this.renderChart(this.donut, this.options);
    }
}

【讨论】：

【解决方案3】：

当您查看 Piechart.vue 的代码时，它似乎只在挂载时渲染一次。这就是为什么在更改选项时，它不会反映在图表中，因为没有重新渲染的功能。

唯一的方法是您必须删除旧的饼图并在选项更改时创建一个新的饼图。有很多方法可以进行强制重新渲染，但最干净的方法仍然是 procoib 所说的，为其附加一个密钥。

【讨论】：

【解决方案4】：

当使用对象作为props并更新其中的一个属性时，reactivity system不会触发更改，因为对象是相同的，并且只更新了一个属性。因此，子组件不会得到更新的值。

您可以做的是使用更新的属性重新创建对象。见以下代码：

this.options = Object.assign({}, this.options, { cutoutPercentage: 50 });

并且在子组件中，使用watcher重新渲染图表

  watch: {
    options(newVal) {
    }
  }

【讨论】：