Chart.js手动调用destroy前无自定义插件触发事件的问题咨询

针对destroy前置事件的可行方案 #

• 方案1：给destroy方法注入切面逻辑
  初始化图表后，重写实例的destroy方法，在原生销毁逻辑执行前插入你需要的监听移除操作，示例代码如下：

  // 保存原生destroy方法
  const originalDestroy = this.chart.destroy;
  // 重写destroy方法
  this.chart.destroy = function(...args) {
    // 此处执行自定义的前置销毁逻辑，比如直接调用插件内的监听移除方法
    yourPluginRemoveListenerLogic(this);
    // 执行原生销毁逻辑
    return originalDestroy.apply(this, args);
  };
  

• 方案2：调整事件绑定的载体
  插件初始化时直接将事件监听器绑定到chart实例而非canvas元素，chart实例在插件destroy回调触发时仍然可用，无需依赖canvas元素是否存在，移除监听时直接调用chart.removeEventListener即可。

是否属于Chart.js的bug #

该行为不属于bug，是3.x版本的预期设计：原生destroy方法的执行优先级是先清理DOM层的canvas关联资源，再触发插件的销毁类生命周期回调。官方原设计默认插件销毁逻辑不需要操作已脱离DOM的canvas元素，未覆盖自定义插件需要操作canvas移除监听的场景。
如果可以升级依赖，Chart.js 4.0及以上版本已经新增了官方的beforeDestroy插件钩子，可直接满足前置销毁的需求。

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