<!-- 父組件 -->
<template>
  <div>
    <!-- 子組件僅在 isActive 為 true 時(shí)存在 -->
    <ChildComponent v-if="isActive" />
    <button @click="destroyComponent">銷(xiāo)毀子組件（移除所有事件）</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const isActive = ref(true);

// 銷(xiāo)毀組件：isActive 設(shè)為 false，子組件被完全銷(xiāo)毀
const destroyComponent = () => {
  isActive.value = false;
};
</script>

<template>
  <ChildComponent :key="componentKey" />
  <button @click="resetComponent">重置組件（移除所有事件）</button>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 初始 key 為 0，點(diǎn)擊后自增
const componentKey = ref(0);

const resetComponent = () => {
  componentKey.value++; // key 變化，舊組件銷(xiāo)毀，新組件創(chuàng)建
};
</script>

<!-- 子組件 ChildComponent.vue -->
<script>
export default {
  created() {
    // 綁定多個(gè)自定義事件
    this.$on('event1', () => console.log('事件1觸發(fā)'));
    this.$on('event2', () => console.log('事件2觸發(fā)'));
  },
  methods: {
    // 手動(dòng)移除所有 $on 綁定的事件
    removeAllEvents() {
      this.$off(); // 無(wú)參數(shù)：移除所有事件的所有回調(diào)
    }
  }
};
</script>

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

const boxRef = ref(null);
// 存儲(chǔ)所有原生事件的配置（類(lèi)型 + 回調(diào)）
const domEvents = [
  { type: 'click', handler: handleClick },
  { type: 'mousemove', handler: handleMouseMove },
  { type: 'scroll', handler: handleScroll }
];

// 定義事件回調(diào)
function handleClick() { /* ... */ }
function handleMouseMove() { /* ... */ }
function handleScroll() { /* ... */ }

// 組件掛載時(shí)綁定所有原生事件
onMounted(() => {
  domEvents.forEach(({ type, handler }) => {
    boxRef.value.addEventListener(type, handler);
  });
});

// 手動(dòng)移除所有原生事件（或在 onUnmounted 中執(zhí)行）
const removeAllDomEvents = () => {
  domEvents.forEach(({ type, handler }) => {
    boxRef.value.removeEventListener(type, handler);
  });
};

// 組件卸載時(shí)確保移除（兜底）
onUnmounted(() => {
  removeAllDomEvents();
});
</script>

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

const chartRef = ref(null);
let chartInstance = null;
// 存儲(chǔ)第三方庫(kù)事件配置
const chartEvents = [
  ['click', handleChartClick],
  ['legendselectchanged', handleLegendChange]
];

function handleChartClick() { /* ... */ }
function handleLegendChange() { /* ... */ }

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

// 批量移除第三方庫(kù)事件
const removeAllChartEvents = () => {
  chartEvents.forEach(([type, handler]) => {
    chartInstance.off(type, handler);
  });
};

// 組件卸載時(shí)銷(xiāo)毀實(shí)例（自動(dòng)移除所有事件）
onUnmounted(() => {
  removeAllChartEvents();
  chartInstance.dispose(); // 銷(xiāo)毀圖表實(shí)例，徹底清理
});
</script>