Vue.js 在VueJS中卸载元素之前是否应该删除JavaScript事件收件箱

由于您的事件监听器没有在外部作用域中被引用，因此它将被垃圾收集.

但Vue不喜欢使用指令，因为它们是以多姆为中心的，但Vue是以VDom为中心的.

所以您可以考虑创建这样的组件:

VUE SFC PLAYGROUND

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

function navigate(msg){
  alert(msg + '...');
}

const agreed = ref(false);

</script>

<template>
  <div class="links">
    <confirm :is-valid="agreed" @close="agreed = false">
      <template #prompt><label>
        <input v-model="agreed" type="checkbox">I agree</label></template>
      <a target="_blank" href="https://stackoverflow.com" @click="navigate('Opening stackoverflow')">Open stackoverflow</a>
      <a target="_blank" href="https://vuejs.org" @click="navigate('Opening vuejs.org')">Open vuejs.org</a>
    </confirm>
  </div>
</template>

Confirm.vue

<script setup>
import {useSlots, ref, mergeProps} from 'vue';

defineProps({
  isValid:{type: Boolean, default: true}
});
const $emit = defineEmits(['close']);

const $slots = useSlots();
const $dialog = ref();

let confirmed = false;
let target = null;
const render = () => {
  return $slots.default().map(vnode => (vnode.props = mergeProps({onClick}, vnode.props ?? {}), vnode));
};

function onClick(e){
  if(confirmed){
    confirmed = false;
    return;
  }
  $dialog.value.showModal();
  e.stopImmediatePropagation();
  e.preventDefault();
  target = e.target;
}

function confirm(){
  confirmed = true;
  cancel();
  setTimeout(() => target.click());
}

function cancel(){
  $emit('close');
  $dialog.value.close();
}

</script>

<template>
  <render/>
  <dialog ref="$dialog">
    <slot name="prompt">Are you sure?</slot>
    <div class="buttons">
      <button :disabled="!isValid" @click="confirm">Yes</button>
      <button @click="cancel">Cancel</button>
    </div>
  </dialog>
</template>