Vue.js组件删除后Plotly.js图表未正常移除问题

我之前也碰到过一模一样的坑！核心原因是Vue组件销毁时，只会处理自己管理的DOM节点，但Plotly初始化图表时，会给目标元素添加额外的子元素、事件监听甚至全局实例引用。如果不手动清理这些Plotly生成的内容，就算Vue组件被移除，Plotly的图表DOM依然会赖在页面上，这就是你删了第一个组件，图表却还在的原因。

你说Plotly.purge没用？其实是调用时机不对——得在Vue组件销毁的生命周期钩子里面执行，确保在Vue移除DOM前先把Plotly的实例清干净。

具体解决方案 #

修改你的chart-one组件，加上beforeDestroy钩子，在组件销毁前主动清理对应的图表元素：

Vue.component('chart-one', {
  props: ['id'],
  template: '<div :id="id"></div>',
  mounted() {
    // 初始化Plotly图表的逻辑不变
    Plotly.newPlot(this.id, [
      {
        x: [1, 2, 3],
        y: [4, 5, 6],
        type: 'scatter'
      }
    ]);
  },
  beforeDestroy() {
    // 组件销毁前，先找到图表元素并清理Plotly实例
    const chartEl = document.getElementById(this.id);
    if (chartEl) {
      Plotly.purge(chartEl);
      // 加个额外保险：直接把DOM元素移除（可选，但更彻底）
      chartEl.remove();
    }
  }
});

为什么之前的方法没生效？ #

• Plotly.replot是用来更新现有图表的，它根本不会清理已有的实例，自然解决不了销毁后残留的问题。
• 如果你之前是在组件销毁后才调用Plotly.purge，那时候Vue可能已经把组件的DOM节点从页面里移走了，或者元素引用已经失效，purge根本找不到目标，当然没用。

额外小贴士 #

• 一定要保证每个图表组件的id是唯一的，不然多个图表实例会互相干扰。
• 如果你的图表数据是响应式的，用Plotly.react来更新图表比重新调用newPlot性能更好，也能减少残留的风险。

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