在 Vue 中，如何确保事件绑定与移除的参数完全一致？

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

const boxRef = ref(null);

// 1. 定义具名回调函数（确保引用唯一）
function handleClick(e) {
  console.log('点击事件触发');
}

function handleScroll(e) {
  console.log('滚动事件触发');
}

// 2. 统一存储事件配置（类型 + 回调 + 可选参数）
const eventConfig = [
  { type: 'click', handler: handleClick, useCapture: false },
  { type: 'scroll', handler: handleScroll, useCapture: true } // 捕获阶段
];

// 3. 绑定事件：遍历配置
onMounted(() => {
  if (boxRef.value) {
    eventConfig.forEach(({ type, handler, useCapture }) => {
      boxRef.value.addEventListener(type, handler, useCapture);
    });
  }
});

// 4. 移除事件：遍历同一配置（参数自动一致）
onUnmounted(() => {
  if (boxRef.value) {
    eventConfig.forEach(({ type, handler, useCapture }) => {
      boxRef.value.removeEventListener(type, handler, useCapture);
    });
  }
});
</script>

<script>
export default {
  created() {
    // 1. 定义具名回调（或绑定到 this 上）
    this.handleCustomEvent = (data) => {
      console.log('自定义事件触发：', data);
    };

    // 2. 绑定事件（用 this 上的函数引用）
    this.$on('custom-event', this.handleCustomEvent);
  },

  beforeDestroy() {
    // 3. 移除事件（引用与绑定完全一致）
    this.$on('custom-event', this.handleCustomEvent);
  }
};
</script>

<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. 统一存储事件配置（库的事件类型 + 回调）
const chartEvents = [
  ['click', handleChartClick],
  ['legendselectchanged', handleLegendChange]
];

onMounted(() => {
  chartInstance = echarts.init(chartRef.value);
  // 3. 批量绑定
  chartEvents.forEach(([type, handler]) => {
    chartInstance.on(type, handler);
  });
});

onUnmounted(() => {
  // 4. 批量移除（参数与绑定完全一致）
  chartEvents.forEach(([type, handler]) => {
    chartInstance.off(type, handler);
  });
  chartInstance.dispose(); // 销毁实例，彻底清理
});
</script>

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

const count = ref(0);
const boxRef = ref(null);

// 用 useCallback 缓存回调，依赖 count 变化时才更新
const handleClick = useCallback(() => {
  console.log('点击：', count.value);
}, [count]); // 依赖数组：count 变化时，函数重新创建

onMounted(() => {
  boxRef.value?.addEventListener('click', handleClick);
});

onUnmounted(() => {
  boxRef.value?.removeEventListener('click', handleClick);
});
</script>