Vue中通过v-if切换ApexCharts时配置不生效渲染异常如何解决

Vue的虚拟DOM Diff算法会默认复用标签类型、位置相同的组件，你用v-if切换的两个<apexchart>组件没有设置唯一标识，Vue会认为是同一个组件，只会更新绑定的属性，不会销毁重建组件实例，导致ApexCharts内部保留了上一次渲染的配置，新配置中未显式声明的属性就会继承旧配置的值。

推荐优先使用第一种方案，成本最低效果最稳定：

• 方案1：给两个<apexchart>组件添加唯一的key属性，强制Vue在切换时销毁旧组件、创建新组件，完全重新初始化图表实例，从根源避免配置残留。
  修正后的代码如下：

  <apexchart v-if="switch1" key="chart1" :options="chartOptions1" :series="series1"></apexchart>
  <apexchart v-else key="chart2" :options="chartOptions2" :series="series2"></apexchart>
  

• 方案2：如果不想销毁重建组件，可以给所有图表配置显式声明所有用到的属性，未用到的属性也手动设置为官方默认值，比如不需要fill配置的图表也显式写fill: { type: 'solid', opacity: 1 }等默认值，覆盖旧的配置。
• 注意：不要使用v-show替代v-if，v-show只会控制组件的显示隐藏，不会销毁组件实例，配置残留的问题依然存在。

内容的提问来源于stack exchange，提问作者DockerUser12