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

const boxRef = ref(null);

// 1. 定義具名回調(diào)函數(shù)（確保引用唯一）
function handleClick(e) {
  console.log('點(diǎn)擊事件觸發(fā)');
}

function handleScroll(e) {
  console.log('滾動事件觸發(fā)');
}

// 2. 統(tǒng)一存儲事件配置（類型 + 回調(diào) + 可選參數(shù)）
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. 移除事件：遍歷同一配置（參數(shù)自動一致）
onUnmounted(() => {
  if (boxRef.value) {
    eventConfig.forEach(({ type, handler, useCapture }) => {
      boxRef.value.removeEventListener(type, handler, useCapture);
    });
  }
});
</script>

<script>
export default {
  created() {
    // 1. 定義具名回調(diào)（或綁定到 this 上）
    this.handleCustomEvent = (data) => {
      console.log('自定義事件觸發(fā)：', data);
    };

    // 2. 綁定事件（用 this 上的函數(shù)引用）
    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. 定義具名回調(diào)
function handleChartClick(params) {
  console.log('圖表點(diǎn)擊：', params);
}

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

// 2. 統(tǒng)一存儲事件配置（庫的事件類型 + 回調(diào)）
const chartEvents = [
  ['click', handleChartClick],
  ['legendselectchanged', handleLegendChange]
];

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

onUnmounted(() => {
  // 4. 批量移除（參數(shù)與綁定完全一致）
  chartEvents.forEach(([type, handler]) => {
    chartInstance.off(type, handler);
  });
  chartInstance.dispose(); // 銷毀實(shí)例，徹底清理
});
</script>

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

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

// 用 useCallback 緩存回調(diào)，依賴 count 變化時(shí)才更新
const handleClick = useCallback(() => {
  console.log('點(diǎn)擊：', count.value);
}, [count]); // 依賴數(shù)組：count 變化時(shí)，函數(shù)重新創(chuàng)建

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

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