如何确保第三方库事件绑定与移除的参数一致？

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let chartInstance = null;

// 1. 定义具名回调函数（确保引用唯一）
function handleChartClick(params) {
  console.log('图表点击：', params);
}

function handleLegendChange(params) {
  console.log('图例变化：', params);
}

// 2. 统一存储事件配置：[事件类型, 回调函数, 库特定选项]
// 数组元素顺序需与库的 on/off 方法参数顺序一致
const chartEvents = [
  ['click', handleChartClick], // ECharts click 事件：无额外选项
  ['legendselectchanged', handleLegendChange] // 图例变化事件
];

onMounted(() => {
  chartInstance = echarts.init(chartRef.value);
  // 3. 批量绑定：遍历配置，展开参数调用 on 方法
  chartEventss.forEach((event) => {
    chartInstance.on(...event); // 等价于 chartInstance.on('click', handleChartClick)
  });
});

onUnmounted(() => {
  if (chartInstance) {
    // 4. 批量移除：遍历同一配置，展开参数调用 off 方法
    chartEvents.forEach((event) => {
      chartInstance.off(...event); // 参数与绑定完全一致
    });
    chartInstance.dispose(); // 销毁实例，彻底清理资源
  }
});
</script>

<script setup>
import { onMounted, onUnmounted, ref, useCallback } from 'vue';
import * as echarts from 'echarts';

const activeSeries = ref('sales'); // 响应式数据
const chartRef = ref(null);
let chartInstance = null;

// 用 useCallback 缓存回调，依赖 activeSeries 变化时才更新
const handleChartClick = useCallback((params) => {
  console.log(`点击 ${activeSeries.value} 系列：`, params);
}, [activeSeries]); // 依赖数组：仅当 activeSeries 变化时，函数才重新创建

// 事件配置：复用缓存后的回调
const chartEvents = [
  ['click', handleChartClick]
];

onMounted(() => {
  chartInstance = echarts.init(chartRef.value);
  chartEvents.forEach((event) => {
    chartInstance.on(...event);
  });
});

onUnmounted(() => {
  if (chartInstance) {
    chartEvents.forEach((event) => {
      chartInstance.off(...event); // 回调引用与绑定一致
    });
    chartInstance.dispose();
  }
});
</script>