面试题：Vue中如何在组件内实现动态事件绑定与解绑

Question

假设你有一个Vue组件，要求在组件挂载时动态绑定一个自定义事件到某个DOM元素上，并且在组件销毁时解绑该事件，请描述实现思路并给出核心代码示例。

Answer 1

实现思路

1. 在Vue组件的mounted钩子函数中，通过document.querySelector获取目标DOM元素，并使用addEventListener绑定自定义事件。
2. 在Vue组件的beforeUnmount钩子函数中，通过removeEventListener解绑之前绑定的自定义事件。

核心代码示例

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

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

// 定义自定义事件处理函数
const handleCustomEvent = () => {
  console.log('自定义事件被触发');
};

onMounted(() => {
  const targetElement = document.querySelector('#target-element');
  if (targetElement) {
    targetElement.addEventListener('custom-event', handleCustomEvent);
  }
});

onBeforeUnmount(() => {
  const targetElement = document.querySelector('#target-element');
  if (targetElement) {
    targetElement.removeEventListener('custom-event', handleCustomEvent);
  }
});
</script>

在上述代码中，#target-element是目标DOM元素的id，实际使用时请替换为真实的选择器。handleCustomEvent是自定义事件的处理函数，可根据需求进行修改。onMounted钩子函数负责绑定事件，onBeforeUnmount钩子函数负责解绑事件。