面试题：Vue 组件中，如果使用原生 addEventListener 监听事件，是否需要手动销毁？为什么？

是的，在 Vue 组件中使用原生 addEventListener 监听事件时，需要手动销毁。这是因为 Vue 的组件生命周期管理机制无法自动处理通过原生方式添加的事件监听器。

1. 为什么需要手动销毁？

Vue 组件在销毁时（如路由切换、组件卸载），会自动清理以下内容：

模板中通过 v-on 或 @ 绑定的事件。
组件实例的生命周期钩子（如 mounted、beforeDestroy）。

然而，通过原生 addEventListener 添加的事件监听器不会被 Vue 自动清理。如果不手动移除这些监听器，可能会导致以下问题：

内存泄漏：事件监听器会一直保留在内存中，即使组件已经销毁。
意外行为：事件监听器可能会在其他地方触发，导致意外的行为或错误。

2. 如何手动销毁？

在 Vue 组件中，可以通过以下步骤手动添加和销毁事件监听器：

步骤 1：在 `mounted` 钩子中添加事件监听器

export default {
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      console.log('Window resized');
    },
  },
};

步骤 2：在 `beforeDestroy` 或 `beforeUnmount` 钩子中移除事件监听器

export default {
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      console.log('Window resized');
    },
  },
};

说明：

在 mounted 钩子中添加事件监听器。
在 beforeDestroy（Vue 2）或 beforeUnmount（Vue 3）钩子中移除事件监听器。

3. 使用 Vue 3 的组合式 API

在 Vue 3 的组合式 API 中，可以通过 onMounted 和 onUnmounted 钩子来管理事件监听器。

示例：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const handleResize = () => {
      console.log('Window resized');
    };

    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });
  },
};

说明：

使用 onMounted 添加事件监听器。
使用 onUnmounted 移除事件监听器。

4. 使用事件委托优化

如果需要监听多个子元素的事件，可以使用事件委托（Event Delegation）来减少事件监听器的数量。

示例：

export default {
  mounted() {
    this.$refs.container.addEventListener('click', this.handleClick);
  },
  beforeDestroy() {
    this.$refs.container.removeEventListener('click', this.handleClick);
  },
  methods: {
    handleClick(event) {
      if (event.target.tagName === 'BUTTON') {
        console.log('Button clicked:', event.target.textContent);
      }
    },
  },
};

说明：