Vue.js -，并不总是重新呈现

Question

我面临两个组件line-chart和bar-chart的反应性问题。

当我将复选框值链接更改为v-model="formChart.type时，组件line-chart和bar-chart将自动重新呈现。

但是，当我单击触发函数submitForm以及generateChart()和resetTypeChart()的button时，这些组件不会被重新呈现。

没有触发mounted()函数。

我真的不明白为什么会发生这种事，因为我正在重新分配type和show.不管有没有Vue.set，我都试过，什么都没有改变。

代码进入到resetTypeChart() 函数中

组件并不总是重新呈现。

  <div class="chart-container">
      <line-chart v-if="formChart.type === 'line_chart' && formChart.show" :chartData="dataChart" ref="lineChart"></line-chart>
      <bar-chart v-if="formChart.type === 'bar_chart' && formChart.show" :chartData="dataChart" ref="barChart"></bar-chart>
  </div>

复选框以更改图表的类型。

<el-radio-group size="small" v-model="formChart.type">
     <el-radio-button label="line_chart"> Line Chart </el-radio-button>
     <el-radio-button label="bar_chart"> Bar Chart </el-radio-button>
</el-radio-group>

生成图表的按钮。

<el-button type="primary" size="large"@click="submitForm('formChart')">Generate</el-button>

submitForm(formName) {
   this.$refs[formName].validate((valid) => {
      this.generateChart();
      this.resetTypeChart();
   } 
});

重置图表的函数(这是一次尝试)

resetTypeChart () {
  const saveType = this.formChart.type;
  this.formChart.type = '';
  this.formChart.show = false;
  Vue.set(this.formChart, 'type', saveType);
  this.formChart.type = saveType;
  this.formChart.show = true;
 }

JSFIDDLE

• 切换到Bar Chart并生成组件
• 单击Generate，同时仍处于相同的单选按钮上。什么都没显示出来。

https://jsfiddle.net/rd3ahxp8/3/

Answer 1

单击generate按钮时没有看到警报的原因是Vue决定什么都没有改变，所以它不需要更新DOM。正如我在上面的注释中所说的，Vue DOM更新是异步进行的，这意味着在方法完成之前，Vue不会检查是否有任何变化。当您的方法完成时，在您的状态中没有什么真正的改变；您将其设置为某个值，然后将其设置为原始值。

为了演示我修改了你的小提琴，并在清除值的时间和设置值的时间之间引入了时间延迟。您可以看到，在本例中，Vue有时间检查值是否已经更改，然后它们被更改回，您将得到您的消息。

generateChart : function () {
    alert('generate')
    const saveType = this.formChart.type;
    this.formChart.type = '';
    this.formChart.show = false;
    setTimeout(()=>{
        this.formChart.type = saveType;
      this.formChart.show = true;

    }, 1000)
}

我认为，在您的情况下，应该触发更新的是对dataChart的一些更改。当该值发生变化时，您的Vue应该重新呈现。然而，你并没有表现出它曾经改变过。现在，如果数据没有改变，并且不希望用户看到不同的图表(因为您将它设置为相同的值)，那么为什么要重新呈现呢？

为了让图表在chartData更改时重新呈现，您应该查看组件中的chartData属性。下面是一个完整的例子，说明我如何做到这一点。

const ChartBase = {
  props: ["chartData"],
  methods:{
    showChart(){
      this.renderChart({
        labels: this.chartData.labels,
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: this.chartData.data
          }
        ]
      }, {responsive: true, maintainAspectRatio: false})
    }
  },
  mounted : function () {
    this.showChart()
    this.$watch("chartData.data", this.showChart)
  },
}

Vue.component('bar-chart', {
  extends: VueChartJs.Bar,
  mixins: [ChartBase]
});

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mixins:[ChartBase]
});

var Main = {
  data () {
    return {
      formChart : {
        type : 'line_chart',
        show : false,
      },
      chartData:{
        labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        data: [40, 39, 10, 40, 39, 80, 40]
      }
    };
  },
  methods : {
    generateChart : function () {
      const newChartData = [...this.chartData.data.reverse()] 
      this.chartData.data = newChartData
    }
  },
}

这是一把小提琴显示单击generate按钮时更改的图表。