Vue.js - 反应性组件，并不总是重新渲染

Question

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

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

但是当我点击触发函数submitForm的button，然后点击generateChart()和resetTypeChart()时，这些组件不会重新渲染。

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

单击生成按钮时没有看到警报的原因是因为 Vue 已经确定没有任何变化，因此它不需要更新 DOM。正如我在上面的 cmets 中所说，Vue DOM 更新是异步发生的，这意味着 Vue 不会检查是否有任何变化，直到您的方法完成之后。当你的方法完成时，你的状态并没有真正改变；您将其设置为某个值，然后将其设置回原始值。

为了演示 I modified your fiddle 并在清除值和将它们设置回的时间之间引入了时间延迟。您可以看到，在 这种 情况下，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 按钮被点击时，here is a fiddle 显示图表的变化。