如何在vue 3中正确删除事件侦听器

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 处理点击事件的逻辑
    }
  }
}
</script>

<template>
  <button ref="button">点击我</button>
</template>

<script>
export default {
  mounted() {
    this.$refs.button.addEventListener('click', this.handleClick);
  },
  beforeUnmount() {
    this.$refs.button.removeEventListener('click', this.handleClick);
  },
  methods: {
    handleClick() {
      // 处理点击事件的逻辑
    }
  }
}
</script>

<template>
  <button ref="button">点击我</button>
</template>

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

export default {
  setup() {
    onMounted(() => {
      const button = this.$refs.button;
      button.addEventListener('click', handleClick);
    });

    onBeforeUnmount(() => {
      const button = this.$refs.button;
      button.removeEventListener('click', handleClick);
    });

    function handleClick() {
      // 处理点击事件的逻辑
    }

    return {};
  }
}
</script>